/* ============================================================
   PRIMENESS: Field Survey product page
   Loads after styles.css + service.css and reuses their tokens,
   buttons, top bar, FAQ and footer. Everything is on black, so
   volt text only ever sits on a dark background.
   ============================================================ */

/* Content is visible without JS; reveals only hide things once JS is on */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

.fs { --fs-max: 1120px; }
.fs .container { max-width: var(--container); }

/* ---------- Top bar on this page: logo left; Sign in + Pricing right ---------- */
.fs-top__links { display: inline-flex; align-items: center; gap: clamp(16px, 2.6vw, 28px); }
.fs-top__signin { font: 600 15px/1 var(--font-display); color: var(--ink); white-space: nowrap; padding: 12px 2px; transition: color .25s; }
.fs-top__signin:hover { color: var(--volt); }
.fs-top__cta { padding: 12px 22px; font-size: 15px; }
@media (max-width: 380px) {
  .fs-top__links { gap: 14px; }
  .fs-top__cta { padding: 11px 16px; font-size: 14px; }
  .fs-top__signin { font-size: 14px; }
}

/* ---------- Shared section bits ---------- */
/* the top bar is sticky (61 to 65 px tall): keyboard focus and anything scrolled into view stops below it, not under it.
   In-page jumps to a section still land 88 px down like every other page (styles.css): 76 + 12. */
html { scroll-padding-top: 76px; }
section[id] { scroll-margin-top: 12px; }
.fs-sec { position: relative; }
.fs-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.fs-head .eyebrow { margin-bottom: 16px; }
.fs-sub { margin-top: 16px; color: var(--muted); font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.6; max-width: 58ch; }
.fs-center { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.fs-small { font: 500 12.5px/1.4 var(--font-mono); color: var(--faint); }
.fs-note { margin: clamp(26px, 3.4vw, 36px) auto 0; max-width: 64ch; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ---------- Hero ---------- */
.fs-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--line); }
.fs-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .6; }
.fs-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 22%, rgba(10,10,11,.86) 0%, rgba(10,10,11,.55) 60%, rgba(10,10,11,.2) 100%),
    linear-gradient(180deg, rgba(10,10,11,.2) 0%, rgba(10,10,11,0) 40%, rgba(10,10,11,.9) 100%); }
.fs-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fs-crumbs { justify-content: center; margin-bottom: clamp(18px, 3vw, 28px); }

.fs-mark { position: relative; width: clamp(84px, 8.6vw, 120px); aspect-ratio: 136 / 208; }
.fs-mark::before { content: ""; position: absolute; inset: -30% -60%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(191,255,0,.16), rgba(191,255,0,0)); }
.fs-mark img { display: block; width: 100%; height: 100%; }
.fs-name { margin-top: 14px; font: 600 clamp(18px, 2vw, 22px)/1 var(--font-display); letter-spacing: .01em; color: #d9d9de; }

.fs-title { margin-top: clamp(14px, 2vw, 22px); font: 700 clamp(33px, 5.5vw, 74px)/1.04 var(--font-display); letter-spacing: -.03em; color: var(--white); }
.fs-title span { display: block; text-wrap: balance; }
.fs-lead { margin-top: 20px; max-width: 60ch; font-size: clamp(16.5px, 1.7vw, 19.5px); line-height: 1.6; color: #c9c9cf; text-wrap: balance; }

.fs-cta { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
.fs-cta .btn { justify-content: center; min-width: 236px; }
.fs-cta .btn--ghost { background: rgba(10,10,11,.55); }
@media (max-width: 560px) {
  .fs-cta { grid-auto-flow: row; width: 100%; max-width: 360px; }
  .fs-cta .btn { min-width: 0; width: 100%; }
}

.fs-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.fs-pills li { padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px; background: rgba(10,10,11,.6); font: 500 12px/1.2 var(--font-mono); letter-spacing: .04em; color: var(--muted); }

/* Device stage: laptop centred, a phone on each side */
.fs-stage { position: relative; width: 100%; max-width: 1120px; margin-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(28px, 4vw, 52px); }
.fs-cap { margin-top: clamp(18px, 2.4vw, 26px); font: 500 12px/1.4 var(--font-mono); color: var(--faint); }

/* ---------- Device frames ---------- */
/* Laptop: a thin black bezel; the screenshot fills the whole display, no inner rounding */
.fs-laptop { position: relative; width: 68%; margin-inline: auto; }
.fs-laptop__screen { position: relative; padding: 1.5% 1.5% 1.7%; border-radius: 16px 16px 4px 4px; background: #050506; border: 1px solid #2e2e34;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 70px -30px rgba(191,255,0,.35); }
.fs-laptop__screen::before { content: ""; position: absolute; left: 50%; top: .55%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1d1d22; }
.fs-laptop__screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 0; background: #0a0a0b; }
.fs-laptop__base { position: relative; height: clamp(9px, 1.4vw, 16px); margin: 0 -7%; border-radius: 2px 2px 14px 14px / 2px 2px 100% 100%;
  background: linear-gradient(180deg, #34343a 0%, #1b1b1f 55%, #0c0c0e 100%); border: 1px solid #2c2c32; border-top-color: #45454c; }
.fs-laptop__base::after { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 38%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #121215; }

/* Phone (10/4/2026, v3): a thin black frame and the app running edge to edge under it, like a real phone.
   No status strip and no gray bezel; a small island floats over the top of the screenshot. */
.fs-phone { position: relative; padding: 1.5%; border-radius: 14.5% / 6.9%; background: #050506; border: 1px solid #34343a;
  box-shadow: 0 34px 70px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06) inset; }
.fs-phone__screen { position: relative; overflow: hidden; border-radius: 13.4% / 6.2%; background: #0a0a0b; }
/* a real-looking status bar in the app's own top color (time, island, signal / wifi / battery), so nothing covers the app */
.fs-phone { container-type: inline-size; }
.fs-phone__bar { display: block; aspect-ratio: 100 / 12.5; position: relative; background: var(--sb, #0b0b0b) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2014%22%20fill%3D%22%23f4f4f5%22%3E%3Crect%20x%3D%220%22%20y%3D%229%22%20width%3D%223%22%20height%3D%225%22%20rx%3D%221%22/%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%223%22%20height%3D%228%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2210%22%20y%3D%223%22%20width%3D%223%22%20height%3D%2211%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2215%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2214%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M30%203.2c3.6%200%206.8%201.4%209.2%203.6l-1.7%201.8A10.6%2010.6%200%200%200%2030%205.6a10.6%2010.6%200%200%200-7.5%203l-1.7-1.8C23.2%204.6%2026.4%203.2%2030%203.2zm0%204.6c2.2%200%204.2.8%205.7%202.2L34%2011.8a5.8%205.8%200%200%200-8%200L24.3%2010c1.5-1.4%203.5-2.2%205.7-2.2zM30%2012.2l1.9%201.8h-3.8z%22/%3E%3Crect%20x%3D%2245%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23f4f4f5%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%221.4%22/%3E%3Crect%20x%3D%2247%22%20y%3D%224%22%20width%3D%2211%22%20height%3D%226%22%20rx%3D%221.6%22/%3E%3Crect%20x%3D%2262%22%20y%3D%225.5%22%20width%3D%221.6%22%20height%3D%223.5%22%20rx%3D%22.8%22%20fill-opacity%3D%22.55%22/%3E%3C/svg%3E") no-repeat right 8.5% center / auto 24%; }
.fs-phone__bar::before { content: "9:41"; position: absolute; left: 10%; top: 50%; transform: translateY(-46%); font: 600 4.6cqw/1 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif; color: #f4f4f5; letter-spacing: -.01em; }
.fs-phone__bar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 29%; height: 58%; transform: translate(-50%, -50%); border-radius: 100px; background: #000; }
/* the app fills the screen between the status bar and the home bar, like a real iPhone (screen = 19.5 : 9);
   the home bar keeps the curved bottom corners off the app, so nothing is cut mid-button */
.fs-phone__screen img { display: block; width: 100%; height: auto; aspect-ratio: 100 / 196; object-fit: cover; object-position: top; border-radius: 0;
  -webkit-mask-image: linear-gradient(#000 86%, transparent 99%); mask-image: linear-gradient(#000 86%, transparent 99%); }
.fs-phone__screen::after { content: ""; display: block; aspect-ratio: 100 / 8.5; background: #0a0a0b url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%208%22%3E%3Crect%20x%3D%2234%22%20y%3D%223.1%22%20width%3D%2232%22%20height%3D%221.6%22%20rx%3D%22.8%22%20fill%3D%22%23f4f4f5%22%20fill-opacity%3D%22.85%22/%3E%3C/svg%3E") no-repeat center / 100% 100%; }

.fs-stage__phone { position: absolute; bottom: 0; width: 22.5%; z-index: 2; }
.fs-stage__phone--l { left: 2%; }
.fs-stage__phone--r { right: 2%; }
/* phones: one big phone, using the width */
@media (max-width: 600px) {
  .fs-stage { display: flex; justify-content: center; padding-bottom: 8px; }
  .fs-stage .fs-laptop, .fs-stage .fs-stage__phone--r { display: none; }
  .fs-stage__phone--l { position: relative; left: auto; bottom: auto; width: min(82vw, 330px); }
}

.fs-browser { position: relative; border-radius: 12px; overflow: hidden; background: #121215; border: 1px solid #2c2c32; box-shadow: 0 40px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset; }
.fs-browser__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #19191d; border-bottom: 1px solid #26262b; }
.fs-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2f2f35; flex: none; }
.fs-browser__bar span { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; min-width: 0; padding: 5px 12px; border-radius: 100px; background: #0d0d10; font: 500 11.5px/1.2 var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-browser__bar span img { width: 8px; height: 12px; flex: none; }
.fs-browser > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 0; }
.fs-browser--app .fs-browser__bar span { background: transparent; padding-left: 4px; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }

/* ---------- Proof strip ---------- */
.fs-strip { border-bottom: 1px solid var(--line); background: #000; }
.fs-strip__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-strip__list li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(22px, 3vw, 32px) 12px; text-align: center; }
.fs-strip__list li + li { border-left: 1px solid var(--line); }
.fs-strip__list b { font: 600 clamp(15.5px, 1.5vw, 18px)/1.25 var(--font-display); color: var(--white); text-wrap: balance; }
.fs-strip__list span { font: 500 12px/1.4 var(--font-mono); color: var(--volt); text-wrap: balance; }
@media (max-width: 860px) {
  .fs-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-strip__list li:nth-child(3) { border-left: 0; }
  .fs-strip__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- How it works ---------- */
.fs-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.fs-steps::before { content: ""; position: absolute; top: 28px; left: 16.67%; right: 16.67%; height: 1px; z-index: 0;
  background: linear-gradient(90deg, rgba(191,255,0,.15), rgba(191,255,0,.55), rgba(191,255,0,.15)); }
.fs-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fs-steps__no { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #000; border: 1px solid rgba(191,255,0,.55); font: 700 15px/1 var(--font-mono); color: var(--volt); box-shadow: 0 0 26px -6px var(--volt-glow); }
.fs-steps h3 { margin-top: 20px; font: 600 clamp(19px, 2vw, 22px)/1.2 var(--font-display); color: var(--white); }
.fs-steps p { margin-top: 10px; max-width: 34ch; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 760px) {
  .fs-steps { grid-template-columns: 1fr; gap: 34px; }
  .fs-steps::before { display: none; }
}

/* ---------- Walkthrough: A2 "Shape-shift" (10/7/2026) ----------
   One object changes form: phone -> paper -> browser. field-survey.js (tour) moves it with transform and opacity only:
   it measures the box before and after the change (FLIP) and draws every frame from one clock, re-fitting each screen
   inside the moving box so nothing stretches. Where the object sits for each step is the --x/--y/--w/--h set here
   (percent of the stage); the screen sits inside it by --il/--it/--ir/--ib.
   Without JS: the phone with the first screen, and the four steps as plain text under it. */
.fs-tt { --hold: 6s; max-width: 1000px; margin-inline: auto;
  --px: 4%; --py: 12%; --pw: 62%; --ph: 64.2%;         /* paper (step 3), also where the fanned sheets sit */
  --bx: 3%; --by: 9%; --bw: 64%; --bh: 68.8%;          /* browser (step 4) */
  --bez: 10px; --sbh: 30px; --bar: 30px; --rad: 46px; --srad: 36px;   /* phone bezel, status bar, title bar, corners */
  --x: 9%; --y: 7%; --w: 30%; --h: 104%;               /* phone (steps 1 and 2) */
  --il: var(--bez); --ir: var(--bez); --ib: var(--bez); --it: calc(var(--bez) + var(--sbh)); }
.fs-tt[data-step="2"] { --x: var(--px); --y: var(--py); --w: var(--pw); --h: var(--ph); --il: 0px; --ir: 0px; --it: 0px; --ib: 0px; }
.fs-tt[data-step="3"] { --x: var(--bx); --y: var(--by); --w: var(--bw); --h: var(--bh); --il: 0px; --ir: 0px; --it: var(--bar); --ib: 0px; }

.fs-tt__wrap { position: relative; }
.fs-tt__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border-radius: 18px; border: 1px solid #26262b; touch-action: pan-y;
  background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 40px 40px, #0b0b0d;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95); }
.fs-tt__glow { position: absolute; z-index: 0; left: -12%; top: -24%; width: 70%; height: 130%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(191,255,0,.14), rgba(191,255,0,0)); transition: transform 1s var(--ease); }
.fs-tt[data-step="2"] .fs-tt__glow, .fs-tt[data-step="3"] .fs-tt__glow { transform: translateX(16%); }

/* the object: a skin per form (cross-faded) and one screen that clips the pictures */
.fs-tt__dev, .fs-tt__scr { position: absolute; transform-origin: 0 0; }
.fs-tt__dev { z-index: 2; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.fs-tt__scr { z-index: 3; overflow: hidden; left: calc(var(--x) + var(--il)); top: calc(var(--y) + var(--it));
  width: calc(var(--w) - var(--il) - var(--ir)); height: calc(var(--h) - var(--it) - var(--ib)); border-radius: 0 0 var(--srad) var(--srad); }
.fs-tt[data-step="2"] .fs-tt__scr { border-radius: 2px; }
.fs-tt[data-step="3"] .fs-tt__scr { border-radius: 0 0 11px 11px; }
.fs-tt.is-moving .fs-tt__dev, .fs-tt.is-moving .fs-tt__scr, .fs-tt.is-moving .fs-tt__shot.is-on, .fs-tt.is-moving .fs-tt__shot.is-was { will-change: transform; }

.fs-tt__skin { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.fs-tt__skin.is-on, .fs-tt__skin.is-was { opacity: 1; visibility: visible; }
.fs-tt__skin.is-on { z-index: 2; }   /* field-survey.js fades the new form in OVER the old one (no grey wash), so no CSS transition here */
.fs-tt__skin.is-was { z-index: 1; }
.fs-tt__skin--phone { border-radius: var(--rad); background: #050506; border: 1px solid #2c2c33;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 50px 90px -30px rgba(0,0,0,.9), 0 0 80px -30px rgba(191,255,0,.35); }
.fs-tt__skin--phone::before { content: ""; position: absolute; inset: calc(var(--bez) - 1px); border-radius: var(--srad); background: #0b0b0d; }
.fs-tt__notch { position: absolute; left: 50%; top: calc(var(--bez) + 5px); width: 76px; height: 20px; margin-left: -38px; border-radius: 20px; background: #050506; }
.fs-tt__sb { position: absolute; left: calc(var(--bez) + 22px); right: calc(var(--bez) + 22px); top: calc(var(--bez) + 9px); display: flex; justify-content: space-between;
  font: 600 11px/1 var(--font-body); color: #fff; }
.fs-tt__skin--paper { border-radius: 3px; background: #0F1013; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); }
.fs-tt__skin--web { border-radius: 12px; background: #121215; border: 1px solid #2c2c33; box-shadow: 0 40px 80px -30px rgba(0,0,0,.95), 0 0 70px -36px rgba(191,255,0,.45); }
.fs-tt__bar { position: absolute; left: 0; right: 0; top: 0; height: var(--bar); display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border-radius: 11px 11px 0 0; background: #19191d; border-bottom: 1px solid #26262b; }
.fs-tt__bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2f2f35; }
.fs-tt__bar span { min-width: 0; margin-left: 8px; padding: 4px 11px; border-radius: 100px; background: #0d0d10; font: 500 10.5px/1.2 var(--font-mono); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the pictures: without JS a plain object-fit; with JS (.is-live) every one is placed by a transform */
.fs-tt__shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0; opacity: 0; visibility: hidden; }
.fs-tt__shot[data-fit="contain"] { object-fit: contain; object-position: center; }
.fs-tt__shot.is-on, .fs-tt__shot.is-was { opacity: 1; visibility: visible; }
.fs-tt__shot.is-on { z-index: 3; }
.fs-tt__shot.is-was { z-index: 1; }
.fs-tt.is-live .fs-tt__shot { width: 1000px; height: auto; max-width: none; transform-origin: 0 0; object-fit: fill; }
.fs-tt__dim { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; }

/* the rest of the set fans out behind the paper, 70 ms apart; the stamp lands last (--sx: how far it sticks out past the paper's right edge) */
.fs-tt__fan { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fs-tt__ghost { position: absolute; left: var(--px); top: var(--py); width: var(--pw); height: var(--ph); overflow: hidden; border-radius: 3px; background: #0F1013; box-shadow: 0 0 0 1px rgba(255,255,255,.12); opacity: 0;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); transition: transform .8s var(--ease-out), opacity .35s; }
.fs-tt__ghost img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.fs-tt[data-step="2"] .fs-tt__ghost { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--r)); transition-delay: calc(.45s + var(--k) * 70ms); }
.fs-tt__stamp { position: absolute; z-index: 5; left: calc(var(--px) + var(--pw)); top: calc(var(--py) + var(--ph)); padding: 8px 10px; border-radius: 7px; background: var(--volt); color: #07090A;
  font: 700 12px/1 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 30px -8px rgba(191,255,0,.7);
  --sx: 10px; opacity: 0; transform: translate(calc(-100% + var(--sx)), -60%) scale(.6) rotate(-6deg); transition: opacity .2s, transform .45s var(--ease-out); }
.fs-tt[data-step="2"] .fs-tt__stamp { opacity: 1; transform: translate(calc(-100% + var(--sx)), -60%) rotate(-3deg); transition-delay: 1s; }

/* the words: one panel per step, stacked in one grid cell so the height never jumps */
.fs-tt__read { position: relative; margin-top: 24px; }
.fs-tt.is-live .fs-tt__read { display: grid; }
.fs-tt.is-live .fs-tt__panel { grid-area: 1 / 1; visibility: hidden; }
.fs-tt.is-live .fs-tt__panel.is-on { visibility: visible; }
.fs-tt:not(.is-live) .fs-tt__panel + .fs-tt__panel { margin-top: 30px; }
.fs-tt.is-live .fs-tt__panel > * { opacity: 0; transform: translateY(14px); }
.fs-tt.is-live .fs-tt__panel.is-in > * { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--ease-out); }
.fs-tt.is-live .fs-tt__panel.is-in > :nth-child(2) { transition-delay: .08s; }
.fs-tt.is-live .fs-tt__panel.is-in > :nth-child(3) { transition-delay: .16s; }
.fs-tt.is-live .fs-tt__panel.is-in > :nth-child(4) { transition-delay: .24s; }
.fs-tt.is-live .fs-tt__panel.is-out > * { opacity: 0; transform: translateY(-10px); transition: opacity .2s, transform .25s; transition-delay: 0s; }
.fs-tt__k { font: 600 11.5px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--volt); }
.fs-tt__h { margin-top: 12px; font: 600 clamp(20px, 2.6vw, 30px)/1.14 var(--font-display); letter-spacing: -.015em; color: var(--white); text-wrap: balance; }
.fs-tt__stats { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 20px; }
.fs-tt__stat b { display: block; font: 700 clamp(28px, 3.4vw, 40px)/1 var(--font-mono); color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.fs-tt__stat b > span[data-count] { display: inline-block; }
.fs-tt__stat b small { font-size: .5em; color: var(--muted); letter-spacing: 0; }
.fs-tt__stat > span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.fs-tt__stat[hidden] { display: none; }
.fs-tt__chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 12px; border-radius: 100px; border: 1px solid rgba(191,255,0,.4); background: rgba(191,255,0,.06);
  font: 600 12px/1.3 var(--font-mono); color: var(--ink); }
.fs-tt__chip i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
.fs-tt__lh { margin-top: 18px; font: 600 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fs-tt__checks { display: grid; gap: 8px; max-width: 340px; margin-top: 10px; }
.fs-tt__checks li { display: flex; align-items: center; gap: 10px; font: 500 14.5px/1.3 var(--font-body); color: var(--ink); }
.fs-tt__checks li.is-no { color: var(--muted); }
.fs-tt__checks em { margin-left: auto; padding-left: 10px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fs-tt__box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.25); }
.fs-tt__checks li.is-yes .fs-tt__box { border-color: rgba(191,255,0,.6); }
.fs-tt__box svg { width: 12px; height: 12px; }
.fs-tt__box path { fill: none; stroke: #07090A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.fs-tt:not(.is-live) .fs-tt__checks li.is-yes .fs-tt__box, .fs-tt.is-live .fs-tt__panel.is-in li.is-yes .fs-tt__box { background: var(--volt); border-color: var(--volt); }
.fs-tt:not(.is-live) .fs-tt__box path, .fs-tt.is-live .fs-tt__panel.is-in li.is-yes path { stroke-dashoffset: 0; }
.fs-tt.is-live .fs-tt__panel.is-in li.is-yes .fs-tt__box { transition: background-color .2s calc(.5s + var(--k) * .14s), border-color .2s calc(.5s + var(--k) * .14s); }
.fs-tt.is-live .fs-tt__panel.is-in li.is-yes path { transition: stroke-dashoffset .3s ease-out calc(.6s + var(--k) * .14s); }
.fs-tt__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* claims switch: data-claims on .fs-tt lists what the app really does; a claim not listed is hidden */
.fs-tt:not([data-claims~="saved-cloud"]) [data-claim="saved-cloud"],
.fs-tt:not([data-claims~="required-fields"]) [data-claim="required-fields"],
.fs-tt:not([data-claims~="what-to-include"]) [data-claim="what-to-include"] { display: none; }

/* the rail: 4 equal steps on one progress line, then Pause / Play. The fill is the clock: its animationend moves on. */
.fs-tt__rail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 24px; }
.fs-tt__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-tt__tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; min-height: 56px; padding: 16px 12px 6px 0;
  text-align: left; color: var(--muted); cursor: pointer; touch-action: manipulation; }
.fs-tt__tab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.1); }
.fs-tt__tab i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--volt); box-shadow: 0 0 10px rgba(191,255,0,.7); transform-origin: left; transform: scaleX(0); }
.fs-tt__tab b { font: 700 11.5px/1 var(--font-mono); color: var(--faint); transition: color .25s; }
.fs-tt__tab span { font: 600 15px/1.2 var(--font-display); transition: color .25s; }
.fs-tt__tab:hover span { color: var(--ink); }
.fs-tt__tab[aria-selected="true"] b { color: var(--volt); }
.fs-tt__tab[aria-selected="true"] span { color: var(--white); }
.fs-tt__tab.is-done i { transform: scaleX(1); opacity: .35; }
.fs-tt:not(.is-auto) .fs-tt__tab[aria-selected="true"] i { transform: scaleX(1); }
.fs-tt.is-auto .fs-tt__tab[aria-selected="true"] i { animation: fsTtFill var(--hold) linear both; }
.fs-tt.is-auto.is-hold .fs-tt__tab[aria-selected="true"] i { animation-play-state: paused; }   /* must outrank the shorthand above */
@keyframes fsTtFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fs-tt__tab:focus-visible { outline: 2px solid var(--volt); outline-offset: 4px; border-radius: 4px; }
.fs-tt__pause { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: var(--bg-2); color: var(--ink);
  cursor: pointer; touch-action: manipulation; transition: border-color .2s, color .2s; }
/* 10/7: no Play/Pause on screen; the tour always loops (a pick holds a step, then it loops on). The button stays for keyboard
   and screen-reader users and shows only while it has keyboard focus. */
.fs-tt__pause { position: absolute; right: 0; top: 50%; translate: 0 -50%; opacity: 0; pointer-events: none; }
.fs-tt__pause:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--volt); outline-offset: 2px; }
.fs-tt__pause:hover { border-color: var(--volt); color: var(--volt); }
.fs-tt__pause svg { width: 14px; height: 14px; fill: currentColor; }
.fs-tt__pause .fs-tt__i-pause, .fs-tt.is-auto .fs-tt__pause .fs-tt__i-play { display: none; }
.fs-tt.is-auto .fs-tt__pause .fs-tt__i-pause { display: block; }
.fs-tt:not(.is-live) .fs-tt__rail, .fs-tt:not(.is-live) .fs-tt__fan, .fs-tt:not(.is-live) .fs-tt__stamp { display: none; }
.fs-tt:not(.is-live) { --x: calc(50% - var(--w) / 2); }   /* no JS: the phone in the middle, the four steps under it */

/* wide screens: the words sit on the stage, beside the object */
@media (min-width: 1024px) {
  .fs-tt.is-live .fs-tt__read { position: absolute; z-index: 4; top: 50%; left: 46%; right: 4%; margin: 0; transform: translateY(-50%); }
  .fs-tt.is-live[data-pos="wide"] .fs-tt__read { left: 71%; right: 3%; }
}
/* tablets: the object in the middle of the stage, the words under it */
@media (max-width: 1023px) {
  .fs-tt { --x: 33%; --w: 34%; --h: 117.7%; --px: 11%; --py: 9%; --pw: 78%; --ph: 80.9%; --bx: 13%; --by: 9.5%; --bw: 74%; --bh: 81%; }
}
/* phones: a square stage; the phone shows the app at about 62% of its real size, the words under it, swipe to change steps */
@media (max-width: 640px) {
  .fs-tt__stage { aspect-ratio: 1 / 1; border-radius: 16px; }
  .fs-tt { --bez: 7px; --sbh: 24px; --bar: 24px; --rad: 34px; --srad: 28px;
    --w: min(80%, 300px); --x: calc(50% - min(40%, 150px)); --y: 6%; --h: calc(min(80%, 300px) * 2.165);
    --px: 3%; --py: 22%; --pw: 94%; --ph: 60.8%; --bx: 2.5%; --by: 16%; --bw: 95%; --bh: 68%; }
  .fs-tt__notch { width: 54px; height: 15px; margin-left: -27px; }
  .fs-tt__sb { left: calc(var(--bez) + 16px); right: calc(var(--bez) + 16px); top: calc(var(--bez) + 7px); font-size: 9.5px; }
  .fs-tt__bar { padding: 0 9px; gap: 5px; }
  .fs-tt__bar i { width: 7px; height: 7px; }
  .fs-tt__bar span { font-size: 9.5px; padding: 3px 9px; }
  .fs-tt__stamp { --sx: -8px; font-size: 11px; padding: 7px 9px; }   /* inside the paper's edge: 15 px or more from the stage edge at 320 to 640 */
  .fs-tt__read { margin-top: 20px; }
  .fs-tt__rail { gap: 8px; margin-top: 20px; }
  .fs-tt__tab { padding-right: 6px; }
  .fs-tt__tab span { font-size: 12.5px; }
  .fs-tt__pause { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-tt *, .fs-tt *::before, .fs-tt *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .fs-tt.is-auto .fs-tt__tab[aria-selected="true"] i { animation-timing-function: steps(1, end); }   /* only if the visitor presses Play */
}

/* ---------- The drawing set: counts, featured sheet, detail crops ---------- */
/* 10/7/2026: the tiles are data driven (SAMPLE_SET in field-survey.js). A tile with no value is hidden,
   so the grid follows the visible count in data-n / --n: 6 today, 7 once the photo-view tile is on.
   Odd counts let the first tile shown lead (data-lead, set by field-survey.js; on "sheets" in the HTML):
   two rows tall on tablets, a full row on phones. No holes for any count from 1 to 7 (checked at 360, 390, 768, 1440). */
.fs-set { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 1px; margin: 0 auto clamp(36px, 5vw, 56px); max-width: 1120px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fs-set li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: clamp(18px, 2.2vw, 26px) 10px; background: var(--bg); text-align: center; }
.fs-set li[hidden] { display: none; }
.fs-set b { font: 700 clamp(28px, 3.2vw, 40px)/1 var(--font-display); color: var(--volt); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fs-set span { font: 500 12px/1.4 var(--font-mono); color: var(--muted); max-width: 18ch; text-wrap: balance; }
.fs-set__note { display: block; max-width: 20ch; margin-top: 4px; padding-top: 8px; border-top: 1px dashed rgba(191,255,0,.3); font: 600 11.5px/1.4 var(--font-mono); color: var(--volt); text-wrap: balance; }
.fs-set__note[hidden] { display: none; }
.fs-set .fs-set__note b { font: inherit; color: inherit; letter-spacing: 0; }
@media (max-width: 1000px) {
  .fs-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-set[data-n="1"], .fs-set[data-n="2"] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .fs-set[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-set[data-n="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-set[data-n="5"] > li[data-lead], .fs-set[data-n="7"] > li[data-lead] { grid-row: span 2; justify-content: center; }
}
@media (max-width: 560px) {
  .fs-set, .fs-set[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-set:is([data-n="1"], [data-n="3"], [data-n="5"], [data-n="7"]) > li[data-lead] { grid-row: auto; grid-column: 1 / -1; }
}

/* ---------- Featured sheet: B1 "Keynote camera" (10/7/2026) ----------
   The numbers live under the sheet (desktop: a line of stops; phone: a row of note cards). Picking one flies the sheet
   to that spot. Camera, frame and tag are moved by field-survey.js from one view state, so the frame never drifts.
   Without JS (.fs-kx without .is-live) the sheet shows on its own with the numbered list under it. */
.fs-feat { max-width: 1120px; margin: 0 auto; }
.fs-kx { position: relative; }   /* holds the note card's layer (.fs-kx__over) */
.fs-kx__frame { position: relative; border-radius: 14px; overflow: hidden; background: #121215; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(191,255,0,.06), 0 0 70px -36px rgba(191,255,0,.4); }
.fs-kx__bar { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px 8px 7px 16px; background: #19191d; border-bottom: 1px solid #26262b; }
.fs-kx__title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font: 600 14.5px/1.25 var(--font-display); color: var(--white); }
.fs-kx__title b { flex: none; font: 700 12.5px/1 var(--font-mono); color: var(--volt); letter-spacing: .02em; }
.fs-kx__title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fs-kx__tools { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.fs-kx__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 100px; border: 1px solid rgba(191,255,0,.45);
  background: rgba(7,9,10,.86); color: var(--ink); font: 600 12px/1 var(--font-mono); letter-spacing: .02em; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: border-color .2s, color .2s, background .2s; }
.fs-kx__btn svg { flex: none; color: var(--volt); }
.fs-kx__btn:hover { color: var(--volt); border-color: var(--volt); }
.fs-kx__btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.fs-kx__btn[hidden] { display: none; }

.fs-kx__stage { position: relative; aspect-ratio: 3600 / 2329; overflow: hidden; background: #0F1013; isolation: isolate; touch-action: pan-y; }
.fs-kx.is-live .fs-kx__stage { cursor: zoom-in; }
.fs-kx.is-live.is-zoom .fs-kx__stage { cursor: pointer; }
.fs-kx__cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.fs-kx.is-flying .fs-kx__cam { will-change: transform; }   /* only while it moves, so the sheet re-draws sharp once it lands */
.fs-kx__cam img { display: block; width: 100%; height: 100%; border-radius: 0; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* rings: small and hollow so they never hide the drawing; a 41 px hit area; kept the same size at any zoom (--inv).
   By the edge of the stage, field-survey.js (hitFit) grows the hit area inward (--hl/--hr/--ht/--hb) by what the stage's
   overflow clips, so every ring on screen keeps about 40 x 40 px to tap. */
.fs-kx__ring { position: absolute; left: var(--x); top: var(--y); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; border: 2px solid var(--volt); box-shadow: 0 0 0 1.5px rgba(7,9,10,.9), inset 0 0 0 1px rgba(7,9,10,.55);
  scale: var(--inv, 1); transition: transform .3s var(--ease), background-color .3s; }
.fs-kx__ring::before { content: ""; position: absolute; border-radius: 50%;
  inset: calc(-14px - var(--ht, 0px)) calc(-14px - var(--hr, 0px)) calc(-14px - var(--hb, 0px)) calc(-14px - var(--hl, 0px)); }
.fs-kx__ring:hover, .fs-kx__ring.is-peek { transform: scale(1.35); }
.fs-kx__ring.is-on { background: var(--volt); }
.fs-kx__ring:focus-visible { outline: 2px solid #07090A; outline-offset: 3px; }
.fs-kx__ring.is-ping { animation: fsKxPing .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes fsKxPing { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.8); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* the frame: drafting crop marks; everything outside it dims to 58% */
.fs-kx__finder { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; border-radius: 6px;
  box-shadow: 0 0 0 200vmax rgba(7,9,10,.58); transition: opacity .35s var(--ease); }
.fs-kx.is-zoom .fs-kx__finder { opacity: 1; }
.fs-kx.is-hop .fs-kx__finder { transition: none; }   /* stop to stop: field-survey.js eases the dim per frame */
.fs-kx__finder i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--volt); filter: drop-shadow(0 0 6px rgba(191,255,0,.55)); }
.fs-kx__finder i:nth-child(1) { left: -4px; top: -4px; border-left-width: 2.5px; border-top-width: 2.5px; }
.fs-kx__finder i:nth-child(2) { right: -4px; top: -4px; border-right-width: 2.5px; border-top-width: 2.5px; }
.fs-kx__finder i:nth-child(3) { left: -4px; bottom: -4px; border-left-width: 2.5px; border-bottom-width: 2.5px; }
.fs-kx__finder i:nth-child(4) { right: -4px; bottom: -4px; border-right-width: 2.5px; border-bottom-width: 2.5px; }
.fs-kx__tag { position: absolute; z-index: 3; left: 0; top: 0; padding: 5px 7px; border-radius: 5px; background: var(--volt); color: #07090A; font: 700 11px/1 var(--font-mono); letter-spacing: .06em;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.fs-kx.is-zoom .fs-kx__tag { opacity: 1; }
/* leader from the note card to the frame */
.fs-kx__lead { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fs-kx__lead path { fill: none; stroke: var(--volt); stroke-width: 1.6; stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); filter: drop-shadow(0 0 4px rgba(191,255,0,.6)); }
.fs-kx__lead path.is-on { stroke-dashoffset: 0; transition: stroke-dashoffset .38s ease-out; }
.fs-kx__lead circle { fill: var(--volt); opacity: 0; }
.fs-kx__lead circle.is-on { opacity: 1; transition: opacity .15s .3s; }
/* note card (the tab panel): slides in on the side away from the spot. It sits in .fs-kx__over, a layer laid exactly over
   the sheet by field-survey.js (fitOver) that clips it like the sheet does. In the page it comes AFTER the line of stops,
   so Tab goes stops, then the note's Previous / Next (the tabs pattern); on screen nothing moves. */
.fs-kx__over { position: absolute; z-index: 5; left: 1px; top: 52px; width: calc(100% - 2px); aspect-ratio: 3600 / 2329; overflow: hidden; pointer-events: none; }
.fs-kx__card { position: absolute; z-index: 4; right: 18px; top: 50%; width: min(330px, 34%); padding: 18px 18px 16px; border-radius: 16px; pointer-events: auto; touch-action: pan-y;
  background: rgba(14,15,12,.92); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(191,255,0,.35); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 50px -24px rgba(191,255,0,.5);
  opacity: 0; visibility: hidden; transform: translate(28px, -50%); transition: opacity .3s, transform .45s var(--ease-out), top .55s var(--ease-out), visibility 0s linear .45s; }
.fs-kx.is-zoom .fs-kx__card { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .3s .12s, transform .45s var(--ease-out) .12s, top .55s var(--ease-out), visibility 0s; }
.fs-kx.is-left .fs-kx__card { right: auto; left: 18px; transform: translate(-28px, -50%); }
.fs-kx.is-zoom.is-left .fs-kx__card { transform: translate(0, -50%); }
.fs-kx.is-zoom.is-swap .fs-kx__card { opacity: 0; transition: opacity .16s, transform .16s, visibility 0s; }
.fs-kx__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: 600 11.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted); }
.fs-kx__card-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--volt); color: #07090A; font: 700 14px/1 var(--font-mono); box-shadow: 0 0 24px -4px rgba(191,255,0,.8); }
.fs-kx__card-body { display: grid; }
.fs-kx__card-body > div { grid-area: 1 / 1; transition: opacity .28s, transform .38s var(--ease-out); }
.fs-kx__card-body > div.is-out { opacity: 0; transform: translateY(-10px); }
.fs-kx__card-body > div.is-pre { opacity: 0; transform: translateY(12px); transition: none; }
.fs-kx__card h3 { font: 600 19px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--white); }
.fs-kx__card p { margin-top: 7px; font-size: 14.5px; line-height: 1.55; color: #c4c4cb; }
.fs-kx__card-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.fs-kx__card-nav .fs-kx__btn { padding: 0 10px; }

/* the numbered line of stops under the sheet (tabs) */
.fs-kx__keys { position: relative; display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); margin-top: 24px; }
.fs-kx__keys::before, .fs-kx__keys::after { content: ""; position: absolute; left: calc(50% / var(--n, 10)); right: calc(50% / var(--n, 10)); top: 17px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); }
.fs-kx__keys::after { background: var(--volt); box-shadow: 0 0 10px rgba(191,255,0,.6); transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform .7s var(--ease-out); }
.fs-kx__key { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; padding: 0 2px 6px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.fs-kx__key b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 1.5px solid rgba(191,255,0,.55); color: var(--volt); font: 700 13px/1 var(--font-mono);
  transition: background-color .3s, color .3s, box-shadow .3s, transform .35s var(--ease-out); }
.fs-kx__key span { max-width: 100%; font: 600 13px/1.25 var(--font-display); text-align: center; overflow-wrap: anywhere; transition: color .25s; }
.fs-kx__key:hover b, .fs-kx__key.is-peek b { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(191,255,0,.12); }
.fs-kx__key:hover span, .fs-kx__key.is-peek span { color: var(--ink); }
.fs-kx__key.is-done b { background: #1b2009; }
.fs-kx__key[aria-selected="true"] b { background: var(--volt); color: #07090A; box-shadow: 0 0 0 5px rgba(191,255,0,.16), 0 0 26px -2px rgba(191,255,0,.8); transform: scale(1.08); }
.fs-kx__key[aria-selected="true"] span { color: var(--white); }
.fs-kx__key:focus-visible { outline: none; }
.fs-kx__key:focus-visible b { outline: 2px solid var(--volt); outline-offset: 4px; }

.fs-kx__actions { display: flex; justify-content: center; margin-top: 22px; }
.fs-kx__play .fs-kx__i-pause, .fs-kx__play.is-playing .fs-kx__i-play { display: none; }
.fs-kx__play.is-playing .fs-kx__i-pause { display: block; }
.fs-kx__hint { margin-top: 12px; text-align: center; font: 500 12px/1.4 var(--font-mono); color: var(--faint); }
.fs-kx__hint-narrow { display: none; }
.fs-kx__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* phone: a snap row of note cards under the sheet drives the camera */
.fs-kx__cards, .fs-kx__dots { display: none; }
.fs-kx__cards { position: relative; gap: 10px; margin: 14px calc(var(--pad) * -1) 0; padding: 2px var(--pad) 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none; }
.fs-kx__cards::-webkit-scrollbar { display: none; }
.fs-kx__cards:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; border-radius: 16px; }
.fs-kx__c { flex: 0 0 86%; scroll-snap-align: center; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); opacity: .55; cursor: pointer;
  transition: border-color .3s, background-color .3s, opacity .3s; }
.fs-kx__c[aria-current="true"] { opacity: 1; border-color: rgba(191,255,0,.5); background: #15170f; }
.fs-kx__c-top { display: flex; align-items: center; gap: 10px; }
.fs-kx__c-top b { flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 100px; background: var(--volt); color: #07090A; font: 700 12.5px/1 var(--font-mono); }
.fs-kx__c-top em { flex: none; margin-left: auto; font: 600 11px/1 var(--font-mono); font-style: normal; color: var(--muted); }
.fs-kx__c h3 { min-width: 0; font: 600 16.5px/1.25 var(--font-display); color: var(--white); }
.fs-kx__c p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #c4c4cb; }
.fs-kx__c--intro .fs-kx__c-top b { font-size: 12px; }
.fs-kx__c-h { margin-top: 10px; }
.fs-kx__dots { justify-content: center; gap: 6px; margin-top: 10px; }
.fs-kx__dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); transition: width .35s var(--ease-out), background-color .3s; }
.fs-kx__dots i.is-on { width: 22px; background: var(--volt); }

/* no JS, or JS failed: the sheet and the numbered list, nothing interactive */
.fs-kx:not(.is-live) .fs-kx__tools, .fs-kx:not(.is-live) .fs-kx__finder, .fs-kx:not(.is-live) .fs-kx__tag, .fs-kx:not(.is-live) .fs-kx__lead, .fs-kx:not(.is-live) .fs-kx__over,
.fs-kx:not(.is-live) .fs-kx__keys, .fs-kx:not(.is-live) .fs-kx__cards, .fs-kx:not(.is-live) .fs-kx__dots, .fs-kx:not(.is-live) .fs-kx__actions, .fs-kx:not(.is-live) .fs-kx__hint { display: none; }
.fs-kx.is-live .fs-feat__side { display: none; }
.fs-kx:not(.is-live) .fs-feat__side { margin-top: clamp(20px, 2.6vw, 30px); }

@media (max-width: 1000px) {
  .fs-kx__key span { font-size: 12px; }
}
/* wide but short screens (1440 x 900, 1366 x 768, 1280 x 720): the bar, the whole sheet and the line of stops fit together
   under the 65 px top bar with about 12 px to spare. A little less air first; then the sheet narrows only as far as it must
   (chrome around the sheet here: 2 border + 47 bar + 14 + 61 stops = 124 px; 65 + 12 + 124 = 201). Taller screens: no change. */
@media (min-width: 1001px) and (max-height: 960px) {
  .fs-kx__bar { min-height: 46px; padding-top: 5px; padding-bottom: 5px; }
  .fs-kx__keys { margin-top: 14px; }
  .fs-kx__key { gap: 7px; padding-bottom: 2px; }
  .fs-feat.fs-kx { max-width: min(1120px, max(720px, calc((100vh - 201px) * 1.5457 + 2px))); }
}
@media (max-width: 760px) {
  .fs-kx__over, .fs-kx__card, .fs-kx__lead, .fs-kx.is-live .fs-kx__keys, .fs-kx__hint-wide { display: none; }
  .fs-kx.is-live .fs-kx__cards, .fs-kx.is-live .fs-kx__dots { display: flex; }
  .fs-kx__hint-narrow { display: inline; }
  .fs-kx__bar { min-height: 48px; padding: 6px 6px 6px 12px; gap: 8px; }
  .fs-kx__title { font-size: 13.5px; }
  .fs-kx__actions { margin-top: 16px; }
}
@media (max-width: 520px) {
  .fs-kx__title span { display: none; }
  .fs-kx__tools .fs-kx__btn { padding: 0 11px; }
  .fs-kx__tools .fs-kx__btn svg { display: none; }
}

/* the numbered list: only shown when there is no JS */
.fs-feat__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   /* 10 stops: 5 even rows */
.fs-feat__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 12px; }
.fs-feat__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--volt); color: #07090A; font: 700 12.5px/1 var(--font-mono); }
.fs-feat__txt { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.fs-feat__txt b { font: 600 15.5px/1.25 var(--font-display); color: var(--white); }
.fs-feat__txt span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.fs-nw { white-space: nowrap; }
@media (max-width: 600px) { .fs-feat__list { grid-template-columns: minmax(0, 1fr); } }
/* "Click to zoom" / "Tap to zoom" style pairs (the sheet viewer's hint uses these) */
.fs-zoom-touch { display: none; }
@media (hover: none), (pointer: coarse) { .fs-zoom-touch { display: inline; } .fs-zoom-fine { display: none; } }
html.fs-touch .fs-zoom-touch { display: inline; }
html.fs-touch .fs-zoom-fine { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fs-kx__finder, .fs-kx__tag, .fs-kx__card, .fs-kx.is-zoom .fs-kx__card, .fs-kx.is-zoom.is-swap .fs-kx__card, .fs-kx__card-body > div, .fs-kx__key b, .fs-kx__keys::after,
  .fs-kx__ring, .fs-kx__c, .fs-kx__dots i, .fs-kx__lead path.is-on, .fs-kx__lead circle.is-on { transition: none !important; }
  .fs-kx__ring.is-ping { animation: none; }
}

.fs-crops__h { margin: clamp(48px, 6vw, 76px) auto clamp(22px, 3vw, 32px); max-width: 1120px; text-align: center; font: 600 clamp(22px, 2.6vw, 30px)/1.15 var(--font-display); letter-spacing: -.015em; color: var(--white); }

/* ---------- Sheet viewer (lightbox) ---------- */
html.fs-lb-open { overflow: hidden; }
.fs-lb { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(6,6,7,.97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fsLbIn .28s var(--ease) both; }
.fs-lb[hidden] { display: none; }
@keyframes fsLbIn { from { opacity: 0; } to { opacity: 1; } }
.fs-lb__bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px clamp(12px, 2.4vw, 24px); padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line); background: rgba(10,10,11,.92); }
.fs-lb__title { flex: 1 1 auto; min-width: 0; font: 600 15px/1.25 var(--font-display); color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-lb__count { flex: none; font: 600 12.5px/1 var(--font-mono); color: var(--muted); }
.fs-lb__tools { flex: none; display: flex; gap: 8px; }
.fs-lb__btn, .fs-lb__nav { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #141417; color: var(--ink);
  cursor: pointer; transition: border-color .2s, color .2s, background .2s; touch-action: manipulation; }
.fs-lb__btn:hover, .fs-lb__nav:hover { border-color: var(--volt); color: var(--volt); }
.fs-lb__btn--close { background: var(--volt); border-color: var(--volt); color: #07090A; }
.fs-lb__btn--close:hover { color: #07090A; box-shadow: 0 0 24px -6px var(--volt-glow); }
.fs-lb__stage { position: relative; flex: 1 1 auto; overflow: hidden; touch-action: none; cursor: grab; }
.fs-lb__stage.is-drag { cursor: grabbing; }
.fs-lb__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  background: #fff; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.fs-lb__img.is-anim { transition: transform .32s var(--ease-out); }
.fs-lb__spin { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(191,255,0,.2); border-top-color: var(--volt);
  animation: fsSpin .8s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none; }
.fs-lb.is-loading .fs-lb__spin { opacity: 1; }
@keyframes fsSpin { to { transform: rotate(360deg); } }
.fs-lb__nav { position: absolute; z-index: 3; top: 50%; margin-top: -22px; width: 46px; height: 46px; border-radius: 50%; background: rgba(20,20,23,.88); }
.fs-lb__nav--prev { left: clamp(10px, 2vw, 22px); }
.fs-lb__nav--next { right: clamp(10px, 2vw, 22px); }
.fs-lb__hint { position: relative; z-index: 3; flex: none; padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); text-align: center; font: 500 12px/1.4 var(--font-mono); color: var(--faint);
  border-top: 1px solid var(--line); background: rgba(10,10,11,.92); }
@media (max-width: 600px) {
  .fs-lb__bar { flex-wrap: wrap; row-gap: 8px; }
  .fs-lb__title { flex-basis: calc(100% - 60px); font-size: 14px; }
  .fs-lb__count { order: 3; }
  .fs-lb__tools { order: 4; margin-left: auto; }
  .fs-lb__btn { width: 40px; height: 40px; }
  .fs-lb__nav { top: auto; bottom: 52px; margin-top: 0; }
}

/* ---------- Feature grid ---------- */
.fs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fs-grid li { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); transition: border-color .3s, background .3s, transform .4s var(--ease); }
.fs-grid li:hover { border-color: rgba(191,255,0,.4); background: #17171b; }
.fs-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: #000; border: 1px solid var(--line); color: var(--volt); transition: box-shadow .35s; }
.fs-ico svg { width: 26px; height: 26px; }
.fs-grid li:hover .fs-ico { box-shadow: 0 0 22px -6px var(--volt-glow); }
.fs-grid h3 { margin-top: 18px; font: 600 18px/1.25 var(--font-display); color: var(--white); }
.fs-grid p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 1100px) { .fs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .fs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .fs-grid { grid-template-columns: 1fr; } }
/* Primeness Cloud storage add-on card: it is the 13th card, so it takes a full row (no lone card at 4, 3 or 2 columns) */
.fs-grid > .fs-grid__addon { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; border-color: rgba(191,255,0,.3);
  background: linear-gradient(90deg, rgba(191,255,0,.07), rgba(191,255,0,0) 62%), var(--bg-2); }
.fs-grid__addon .fs-ico { flex: none; }
.fs-grid__addon h3 { margin-top: 0; }
@media (max-width: 540px) {
  .fs-grid > .fs-grid__addon { flex-direction: column; align-items: flex-start; gap: 0; }
  .fs-grid__addon h3 { margin-top: 18px; }
}

/* ===== Add-on switch (10/7/2026), REV1011 10/9/2026 =====
   The Primeness Cloud storage add-on is built (server CLOUD_V1) and now shows, marked "coming soon" (data-soon, see fs-rev.css).
   To hide it again: [data-addon="cloud-storage"] { display: none !important; } here (the JSON-LD FAQ text still names it). */

/* ---------- Why contractors switch ---------- */
.fs-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fs-why li { position: relative; padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 34px); background: var(--bg); transition: background .35s; }
.fs-why li:hover { background: var(--bg-2); }
.fs-why__k { display: block; font: 700 13px/1 var(--font-mono); color: var(--volt); letter-spacing: .08em; }
.fs-why h3 { margin-top: 16px; font: 600 clamp(19px, 2vw, 22px)/1.2 var(--font-display); color: var(--white); }
.fs-why p { margin-top: 10px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 900px) { .fs-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fs-why { grid-template-columns: 1fr; } }

/* ---------- Security + data ---------- */
.fs-trust { display: grid; grid-template-columns: minmax(0, 1fr) 270px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.fs-trust__phone { width: 100%; }
.fs-card { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.fs-card h3 { font: 600 clamp(19px, 2vw, 22px)/1.2 var(--font-display); color: var(--white); margin-bottom: 18px; }
.fs-checks { display: grid; gap: 14px; }
.fs-checks li { position: relative; padding-left: 30px; color: #c9c9cf; font-size: 15.5px; line-height: 1.55; }
.fs-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: rgba(191,255,0,.12); border: 1px solid rgba(191,255,0,.5); }
.fs-checks li::after { content: ""; position: absolute; left: 6px; top: calc(.2em + 4px); width: 5px; height: 8px; border: solid var(--volt); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
@media (max-width: 980px) {
  .fs-trust { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .fs-trust__phone { width: min(76vw, 290px); margin-inline: auto; order: -1; }
}

/* ---------- Works everywhere ---------- */
.fs-browser--sm .fs-browser__bar { height: 28px; padding: 0 11px; gap: 6px; }
.fs-browser--sm .fs-browser__bar i { width: 8px; height: 8px; }
.fs-browser--sm .fs-browser__bar span { font-size: 10.5px; padding: 4px 10px; }
@media (max-width: 860px) {
}

/* ---------- Built by a field tech ---------- */
.fs-about { display: grid; grid-template-columns: auto minmax(0, 600px); justify-content: center; gap: clamp(28px, 5vw, 64px); align-items: center; }
.fs-about__mark { position: relative; width: clamp(96px, 12vw, 150px); }
.fs-about__mark::before { content: ""; position: absolute; inset: -25% -55%; z-index: 0; background: radial-gradient(closest-side, rgba(191,255,0,.12), transparent); pointer-events: none; }
.fs-about__mark img { position: relative; display: block; width: 100%; height: auto; }
.fs-about__copy .eyebrow { margin-bottom: 14px; }
.fs-about__copy p:not(.eyebrow) { margin-top: 16px; color: #c9c9cf; line-height: 1.7; max-width: 62ch; }
@media (max-width: 700px) {
  .fs-about { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .fs-about__copy { display: flex; flex-direction: column; align-items: center; }
}

/* ---------- FAQ ---------- */
.fs-faq { max-width: 860px; margin-inline: auto; }

/* ---------- Final CTA band ---------- */
.fs-band { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); background: #000; border-bottom: 1px solid var(--line); }
.fs-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 50% 20%, rgba(191,255,0,.12), transparent 70%); }
.fs-band__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fs-band__mark { width: 64px; height: auto; margin-bottom: 22px; filter: drop-shadow(0 0 22px rgba(191,255,0,.25)); }
.fs-band h2 { font: 700 clamp(30px, 4.8vw, 58px)/1.04 var(--font-display); letter-spacing: -.025em; color: var(--white); max-width: 16ch; text-wrap: balance; }
.fs-band p { margin-top: 14px; color: #c9c9cf; font-size: clamp(16px, 1.6vw, 18px); }
.fs-band .fs-cta { margin-top: 30px; }

/* ---------- Footer (4 columns, Field Survey links second) ---------- */
.fs .sv-footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, .8fr) minmax(0, 1.5fr); }
@media (max-width: 900px) { .fs .sv-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fs .sv-footer__cols { grid-template-columns: 1fr; } }

/* ---------- Parallax + motion ---------- */
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .fs [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fs [data-parallax] { transform: none !important; }
  .fs-lb, .fs-lb__spin { animation: none; }
  .fs-lb__img.is-anim { transition: none; }
}

/* ===== Pricing button: the "live current" showpiece (10/5/2026) =====
   A volt arc runs round the edge like the background current, a soft glow breathes,
   a sheen crosses every few seconds; hover lifts it and slides the arrow. Still under reduced motion. */
@property --fs-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fs-cta--solo { justify-content: center; }
.fs-price { position: relative; display: inline-flex; padding: 2px; border-radius: 100px; isolation: isolate; text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.fs-price__ring { position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--fs-a), rgba(191,255,0,0) 0deg, rgba(191,255,0,0) 210deg, rgba(234,255,176,.95) 300deg, #BFFF00 336deg, rgba(191,255,0,0) 360deg);
  animation: fsRing 3.4s linear infinite; }
.fs-price__ring::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; background: inherit; filter: blur(16px);
  opacity: .5; animation: fsBreathe 3.4s ease-in-out infinite; }
.fs-price__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; overflow: hidden;
  padding: 21px 40px; border-radius: 100px; color: #07090A; font: 700 18px/1 var(--font-display); letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(180deg, #dcff66 0%, #BFFF00 52%, #a6e000 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.12), 0 16px 46px -14px rgba(191,255,0,.6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.fs-price__btn::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.85) 50%, transparent 68%);
  transform: translateX(-130%); animation: fsSheen 4.8s var(--ease) 1.4s infinite; }
.fs-price__btn svg { position: relative; transition: transform .35s var(--ease); }
.fs-price__label { position: relative; }
.fs-price:hover .fs-price__btn { transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.12), 0 22px 60px -12px rgba(191,255,0,.8); }
.fs-price:hover .fs-price__btn svg { transform: translateX(6px); }
.fs-price:hover .fs-price__ring { animation-duration: 1.8s; }
.fs-price:active .fs-price__btn { transform: translateY(0) scale(.98); }
.fs-price:focus-visible { outline: none; }
.fs-price:focus-visible .fs-price__btn { box-shadow: 0 0 0 3px #0a0a0b, 0 0 0 5px #BFFF00, 0 16px 46px -14px rgba(191,255,0,.6); }
/* 10/7/2026: renamed from fsSpin, which clashed with the sheet viewer's spinner keyframes and stopped it rotating */
@keyframes fsRing { to { --fs-a: 360deg; } }
@keyframes fsBreathe { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes fsSheen { 0% { transform: translateX(-130%); } 26%, 100% { transform: translateX(130%); } }
@media (max-width: 480px) { .fs-price__btn { padding: 20px 30px; font-size: 17px; } }
@media (prefers-reduced-motion: reduce) {
  .fs-price__ring, .fs-price__ring::after, .fs-price__btn::before { animation: none; }
  .pmark__dot { animation: none; }   /* 10/7: the header logo dot (styles.css) pulsed forever; same fix belongs in styles.css site wide */
  .fs-price__ring { background: linear-gradient(90deg, rgba(191,255,0,.15), #BFFF00, rgba(191,255,0,.15)); }
}

/* 10/5/2026: the pricing button's ring must match the button at every width (on phones the grid cell stretched the ring past the button) */
.fs-cta--solo { display: flex; justify-content: center; }
.fs-price { justify-self: center; max-width: 100%; }
.fs-price__btn { flex: 1 1 auto; }
@media (max-width: 640px) { .fs-cta--solo { width: 100%; } .fs-cta--solo .fs-price { width: 100%; max-width: 360px; } .fs-price__btn { padding-left: 20px; padding-right: 20px; } }