/* =============================================================================
   Fleet Management System -- the public website (2026-09-29 design system).

   Every colour, radius, size and spacing below reads an --fw-* token. The layout
   writes the active theme's tokens after this file: its DARK set into :root and its
   LIGHT set into :root[data-theme="light"], so switching mode is an attribute on
   <html> and switching theme is a token swap. The values here are only the Signal
   Orange dark defaults for a site with no theme row yet.

   Class prefix: fw-. The admin area never loads this file.
   ============================================================================= */

:root {
    --fw-page: #0A0E14;
    --fw-raised: #111823;
    --fw-sunken: #070A0F;
    --fw-surface: #182130;
    --fw-text: #E9EDF3;
    --fw-muted: #98A2B0;
    --fw-line: rgba(255, 255, 255, .09);
    --fw-line-2: rgba(255, 255, 255, .18);
    --fw-accent: #FF6B2C;
    --fw-accent-lift: #FF8F5E;
    --fw-accent-deep: #D9531A;
    --fw-accent-ink: #FF8A57;
    --fw-accent-wash: rgba(255, 107, 44, .12);
    --fw-ok: #21C08B;
    --fw-due: #F5A524;
    --fw-bad: #E5484D;
    --fw-ok-ink: #3DD39D;
    --fw-due-ink: #F5A524;
    --fw-bad-ink: #FF6F73;
    --fw-ok-wash: rgba(33, 192, 139, .14);
    --fw-due-wash: rgba(245, 165, 36, .15);
    --fw-bad-wash: rgba(229, 72, 77, .15);
    --fw-font-display: 'Space Grotesk', system-ui, sans-serif;
    --fw-font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --fw-font-num: 'IBM Plex Mono', ui-monospace, monospace;
    --fw-h1: clamp(36px, 5.4vw, 61px);
    --fw-h2: clamp(28px, 3.4vw, 39px);
    --fw-h3: 22px;
    --fw-radius: 5px;
    --fw-radius-lg: 10px;
    --fw-pad-y: 64px;
    --fw-btn-bg: linear-gradient(180deg, #FF8A57, #F2581A);
    --fw-btn-ink: #0A0E14;
    --fw-btn-border: transparent;
    --fw-hov-bg: linear-gradient(180deg, #FF8A57, #F2581A);
    --fw-hov-ink: #0A0E14;
    --fw-hov-tf: translateY(-2px);
    --fw-hov-sh: 0 12px 24px -12px #FF6B2C;
    --fw-hov-filter: none;
    --fw-scene-ground: #111823;
    --fw-scene-top: #262F3D;
    --fw-scene-left: #182130;
    --fw-scene-right: #070A0F;
    --fw-scene-road: #1E2735;
    --fw-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
    --fw-ease: cubic-bezier(.2, .7, .2, 1);
    --fw-ease-io: cubic-bezier(.65, 0, .35, 1);
    color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Still, for a visitor who pressed Pause on an animation (see FW.reduced in fw-kit.js). This
   used to be @media (prefers-reduced-motion: reduce): see there for why it is not any more. */
:root[data-motion="still"] { scroll-behavior: auto; }

body {
    margin: 0;
    background: var(--fw-page);
    color: var(--fw-text);
    font-family: var(--fw-font-body);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: clip;
    transition: background 240ms, color 240ms;
}

a { color: var(--fw-accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--fw-text); }
:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 2px; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
input[type=range] { accent-color: var(--fw-accent); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.fw-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: var(--fw-radius); background: var(--fw-raised); color: var(--fw-text); }
.fw-skip:focus { left: 16px; }
.fw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.fw-wrap { max-width: 1192px; margin: 0 auto; padding: 0 24px; }
.fw-section { padding: var(--fw-pad-y) 0; }
.fw-section.is-raised { background: var(--fw-raised); border-top: 1px solid var(--fw-line); border-bottom: 1px solid var(--fw-line); }
.fw-section.is-wash { background: var(--fw-accent-wash); border-top: 1px solid var(--fw-line); border-bottom: 1px solid var(--fw-line); }
.fw-section.is-band { background: var(--fw-surface); border-top: 1px solid var(--fw-line); border-bottom: 1px solid var(--fw-line); }
.fw-section.is-flush-top { padding-top: 0; }

.fw-eyebrow { font-family: var(--fw-font-num); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fw-accent-ink); margin-bottom: 14px; }
.fw-h1 { font-family: var(--fw-font-display); font-size: var(--fw-h1); line-height: 1.02; letter-spacing: -.028em; font-weight: 600; text-wrap: balance; }
.fw-h2 { font-family: var(--fw-font-display); font-size: var(--fw-h2); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.fw-h3 { font-family: var(--fw-font-display); font-size: var(--fw-h3); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.fw-lead { font-size: 17px; color: var(--fw-muted); text-wrap: pretty; }
.fw-lead-lg { font-size: 19px; line-height: 1.55; color: var(--fw-muted); text-wrap: pretty; }
.fw-muted { color: var(--fw-muted); }
.fw-mono { font-family: var(--fw-font-num); }

.fw-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 48px; align-items: end; margin-bottom: 32px; }
.fw-head.is-tall { margin-bottom: 36px; }
.fw-head-narrow { max-width: 720px; margin-bottom: 24px; }
.fw-head-narrow .fw-lead { margin-top: 14px; }

.fw-icon { fill: none; stroke: var(--fw-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fw-icon.is-muted { stroke: var(--fw-muted); }
.fw-check { flex: none; margin-top: 2px; fill: none; stroke: var(--fw-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fw-ticks { list-style: none; display: grid; gap: 10px; font-size: 15px; }
.fw-ticks li { display: flex; gap: 10px; line-height: 1.45; }

/* ---------- Buttons ---------- */

.fw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--fw-radius); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--fw-text); transition: transform 240ms, box-shadow 240ms, filter 240ms, background 240ms, border-color 240ms; }
.fw-btn.is-lg { height: 52px; padding: 0 22px; font-size: 16px; }
.fw-btn.is-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.fw-btn.is-xs { height: 32px; padding: 0 10px; font-size: 12px; font-weight: 500; border-color: var(--fw-line); }
.fw-btn.is-block { width: 100%; }
.fw-btn-primary { background: var(--fw-btn-bg); color: var(--fw-btn-ink); border-color: var(--fw-btn-border); }
.fw-btn-primary:hover, .fw-btn-primary:focus-visible { background: var(--fw-hov-bg); color: var(--fw-hov-ink); transform: var(--fw-hov-tf); box-shadow: var(--fw-hov-sh); filter: var(--fw-hov-filter); }
.fw-btn-outline { border-color: var(--fw-line-2); color: var(--fw-text); }
.fw-btn-outline:hover { border-color: var(--fw-text); color: var(--fw-text); }
.fw-btn-outline.is-raised { background: var(--fw-raised); }
.fw-btn-text { padding: 0 12px; color: var(--fw-accent-ink); }
.fw-btn-text:hover { color: var(--fw-text); }
.fw-btn[disabled], .fw-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.fw-link-arrow { font-weight: 600; }
.fw-textbtn { border: 0; background: transparent; color: var(--fw-accent-ink); font: 600 15px var(--fw-font-body); cursor: pointer; padding: 0; }
.fw-iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: transparent; color: var(--fw-text); cursor: pointer; flex: none; }
.fw-iconbtn.is-44 { width: 44px; height: 44px; }
.fw-iconbtn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.fw-playbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: transparent; color: var(--fw-text); font: 500 12px var(--fw-font-body); cursor: pointer; }
.fw-playbtn svg { fill: currentColor; }
.fw-playbtn.is-square { width: 32px; padding: 0; justify-content: center; }

/* ---------- Status chip ---------- */

.fw-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--fw-radius); font-family: var(--fw-font-num); font-size: 11.5px; white-space: nowrap; flex: none; color: var(--fw-muted); background: var(--fw-line); transition: color 480ms, background 480ms; }
.fw-chip.is-lg { height: 26px; padding: 0 10px; font-size: 12px; }
.fw-chip.has-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.fw-chip[data-s="ok"] { color: var(--fw-ok-ink); background: var(--fw-ok-wash); }
.fw-chip[data-s="due"] { color: var(--fw-due-ink); background: var(--fw-due-wash); }
.fw-chip[data-s="bad"] { color: var(--fw-bad-ink); background: var(--fw-bad-wash); }
.fw-chip[data-s="acc"] { color: var(--fw-accent-ink); background: var(--fw-accent-wash); }
.fw-badge { font-family: var(--fw-font-num); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); color: var(--fw-muted); white-space: nowrap; font-weight: 500; }
.fw-plate { background: #F7D117; color: #111; font: 700 11.5px var(--fw-font-num); letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .35); white-space: nowrap; }

/* ---------- Brand ---------- */

.fw-brand { display: flex; align-items: center; gap: 10px; width: 172px; flex: none; text-decoration: none; color: var(--fw-text); }
.fw-brand:hover { color: var(--fw-text); }
.fw-brand-tile { width: 36px; height: 36px; flex: none; border-radius: var(--fw-radius); background: var(--fw-accent); display: grid; place-items: center; color: var(--fw-page); overflow: hidden; }
.fw-brand-tile svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fw-brand-tile img { width: 36px; height: 36px; object-fit: contain; }
.fw-brand-mark { width: 36px; height: 36px; flex: none; object-fit: contain; }
/* A full logo from Site details: as tall as the tile, as wide as it needs up to the brand slot. */
.fw-brand-wide { display: block; height: 36px; width: auto; max-width: 172px; object-fit: contain; object-position: left center; }
.fw-brand-words { display: flex; flex-direction: column; line-height: 1; }
.fw-brand-lead { font-family: var(--fw-font-display); font-weight: 700; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; }
.fw-brand-sub { font-family: var(--fw-font-display); font-weight: 500; font-size: 8.4px; letter-spacing: .19em; text-transform: uppercase; margin-top: 4px; color: var(--fw-muted); white-space: nowrap; }
.fw-brand-plain { font-family: var(--fw-font-display); font-weight: 700; font-size: 17px; }

/* ---------- Announcement ---------- */

.fw-announce { background: var(--fw-accent-wash); border-bottom: 1px solid var(--fw-line); font-size: 13.5px; }
.fw-announce-inner { max-width: 1192px; margin: 0 auto; padding: 9px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; text-align: center; position: relative; }
.fw-announce-tag { font-family: var(--fw-font-num); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fw-accent-ink); }
.fw-announce a { font-weight: 600; white-space: nowrap; }
.fw-announce-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: transparent; color: var(--fw-muted); cursor: pointer; border-radius: var(--fw-radius); }
.fw-announce-close:hover { color: var(--fw-text); }
.fw-announce[hidden] { display: none; }

/* ---------- Header ---------- */

.fw-header { position: sticky; top: 0; z-index: 40; background: var(--fw-page); border-bottom: 1px solid var(--fw-line); }
.fw-header-inner { max-width: 1192px; margin: 0 auto; padding: 0 24px; height: 65px; display: flex; align-items: center; gap: 24px; }
.fw-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.fw-nav-link { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--fw-text); text-decoration: none; font: 500 15px var(--fw-font-body); border-radius: var(--fw-radius); border: 0; background: transparent; cursor: pointer; }
.fw-nav-link:hover { background: var(--fw-raised); color: var(--fw-text); }
.fw-nav-link[aria-current="page"], .fw-nav-link.is-current { background: var(--fw-raised); box-shadow: inset 0 -2px 0 var(--fw-accent); }
.fw-nav-link svg { fill: none; stroke: currentColor; stroke-width: 2; }
.fw-header-actions { display: flex; align-items: center; gap: 8px; }
.fw-login { height: 40px; display: flex; align-items: center; padding: 0 10px; color: var(--fw-text); text-decoration: none; font-weight: 500; font-size: 15px; }
.fw-login:hover { color: var(--fw-accent-ink); }
.fw-header-compact { display: none; flex: 1; align-items: center; justify-content: flex-end; gap: 8px; }
.fw-header-compact .fw-btn { padding: 0 14px; }

.fw-drawer { position: fixed; inset: 0; z-index: 70; background: var(--fw-page); overflow-y: auto; display: flex; flex-direction: column; }
.fw-drawer[hidden] { display: none; }
.fw-drawer-top { height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--fw-line); flex: none; }
.fw-drawer-title { font-family: var(--fw-font-display); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fw-drawer-body { padding: 16px 24px; flex: 1; }
.fw-drawer-nav { display: grid; margin-top: 20px; }
.fw-drawer-nav a { min-height: 52px; display: flex; align-items: center; font-family: var(--fw-font-display); font-size: 22px; font-weight: 600; color: var(--fw-text); text-decoration: none; border-bottom: 1px solid var(--fw-line); }
.fw-drawer-nav a[aria-current="page"] { color: var(--fw-accent-ink); }
.fw-drawer-foot { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 24px 20px; background: var(--fw-page); border-top: 1px solid var(--fw-line); }

@media (max-width: 1179px) {
    .fw-nav, .fw-header-actions { display: none; }
    .fw-header-compact { display: flex; }
}

@media (max-width: 719px) {
    .fw-header-compact .fw-btn { display: none; }
}

.fw-btnrow { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- CTA band ("Start today") ----------
   Beside the words, the steps as a deck of cards in 3D: data-pos 0 is the front card, 1 waits on
   the right and 2 on the left, so moving every card on one place turns the deck. The cards share
   one grid cell, which makes the stage as tall as the tallest card without fixing a height. */

.fw-cta { padding: var(--fw-pad-y) 0 calc(var(--fw-pad-y) + 16px); }
.fw-cta-box { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); }
.fw-cta-box.has-visual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.fw-cta-box.has-visual::before { content: ""; position: absolute; top: -30%; right: -12%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--fw-accent-wash), transparent); pointer-events: none; }
.fw-cta-routes { position: absolute; right: 0; bottom: 0; width: 60%; height: 100%; opacity: .5; fill: none; stroke: var(--fw-accent); stroke-width: 1.5; }
.fw-cta-copy { position: relative; max-width: 640px; }
.fw-cta-copy p { font-size: 17px; color: var(--fw-muted); margin: 14px 0 26px; }
.fw-cta-steps { list-style: none; display: grid; gap: 8px; margin: -6px 0 26px; }
.fw-cta-step { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: transparent; color: var(--fw-text); font: inherit; text-align: left; }
button.fw-cta-step { cursor: pointer; transition: border-color 240ms, background 240ms; }
button.fw-cta-step:hover { border-color: var(--fw-line-2); }
.fw-cta-step[aria-pressed="true"] { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-cta-step b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.fw-cta-step small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--fw-muted); }
.fw-cta-num { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fw-accent-wash); color: var(--fw-accent-ink); font: 600 12px var(--fw-font-num); transition: background 240ms, color 240ms; }
.fw-cta-step[aria-pressed="true"] .fw-cta-num { background: var(--fw-btn-bg); color: var(--fw-btn-ink); }
@media (max-width: 899px) { .fw-cta-box.has-visual { grid-template-columns: minmax(0, 1fr); } }

.fw-cta-fig { position: relative; margin: 0; min-width: 0; }
.fw-cta-stage { position: relative; padding: 24px 0 30px; perspective: 1100px; }
.fw-cta-inner { position: relative; display: grid; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-12deg); }
.fw-cta-inner > .fw-grid-floor { left: 0; right: 0; top: 24%; bottom: -14%; }
.fw-cta-card { grid-area: 1 / 1; margin: 0 14%; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-page); box-shadow: var(--fw-shadow); overflow: hidden; transition: transform 800ms var(--fw-ease), opacity 800ms var(--fw-ease), border-color 400ms, box-shadow 400ms; }
.fw-cta-card[data-pos="0"] { transform: translateZ(50px); border-color: var(--fw-accent); box-shadow: 0 0 0 4px var(--fw-accent-wash), var(--fw-shadow); }
.fw-cta-card[data-pos="1"] { transform: translateX(30%) translateZ(-80px) rotateY(-24deg); opacity: .5; }
.fw-cta-card[data-pos="2"] { transform: translateX(-30%) translateZ(-80px) rotateY(24deg); opacity: .5; }
/* Only the front card is read; the ones behind show as cards, their words faded right down. */
.fw-cta-card > * { transition: opacity 500ms var(--fw-ease); }
.fw-cta-card:not([data-pos="0"]) > * { opacity: .15; }
.fw-cta-card-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--fw-line); background: var(--fw-surface); font-size: 14px; }
.fw-cta-card-top b { font-weight: 600; }
.fw-cta-card-body { display: grid; gap: 8px; align-content: start; min-height: 150px; padding: 14px; }
/* The plans, the company form and the new CRM, drawn small. */
.fw-cta-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); font-size: 13.5px; }
.fw-cta-row b { flex: 1; font-weight: 600; }
.fw-cta-row em { font: 12px var(--fw-font-num); font-style: normal; color: var(--fw-muted); white-space: nowrap; }
.fw-cta-row .fw-radio { width: 16px; height: 16px; }
.fw-cta-row.is-on { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-cta-row.is-on .fw-radio { border: 5px solid var(--fw-accent); }
.fw-cta-field { display: grid; gap: 4px; }
.fw-cta-field small { font-size: 11.5px; color: var(--fw-muted); }
.fw-cta-field span { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); background: var(--fw-raised); font: 12.5px var(--fw-font-num); }
.fw-cta-logo { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--fw-btn-bg); color: var(--fw-btn-ink); font: 700 9.5px var(--fw-font-body); font-style: normal; }
.fw-cta-swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--fw-accent); box-shadow: 0 0 0 3px var(--fw-accent-wash); }
/* The company name types itself in each time its card comes to the front. */
.fw-cta-type { display: inline-block; overflow: hidden; white-space: nowrap; max-width: calc(var(--n) * 1ch); font-style: normal; color: var(--fw-text); }
.fw-cta-card[data-pos="0"] .fw-cta-type { border-right: 1px solid var(--fw-accent); animation: fw-cta-type 1.2s steps(var(--n)) 300ms both; }
@keyframes fw-cta-type { from { max-width: 0; } to { max-width: calc(var(--n) * 1ch); } }
.fw-cta-crm { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 10px; }
.fw-cta-nav { display: grid; gap: 4px; align-content: start; }
.fw-cta-nav span { padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--fw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-cta-nav span:first-child { background: var(--fw-accent-wash); color: var(--fw-accent-ink); font-weight: 600; }
.fw-cta-kpis { display: grid; gap: 8px; align-content: start; justify-items: start; }
.fw-cta-kpi { width: 100%; height: 28px; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: var(--fw-raised); }
.fw-cta-kpi i { display: block; width: 0; height: 6px; border-radius: 3px; background: var(--fw-accent); transition: width 900ms var(--fw-ease) 300ms; }
.fw-cta-card[data-pos="0"] .fw-cta-kpi i { width: var(--w); }
.fw-cta-stage.is-media { aspect-ratio: 16 / 10; padding: 0; }
.fw-cta-stage.is-media .fw-cta-inner { position: absolute; inset: 0; display: block; }
.fw-cta-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); box-shadow: var(--fw-shadow); transform: translateZ(20px); }
/* Still, for a visitor who pressed Pause on an animation (see FW.reduced in fw-kit.js). This
   used to be @media (prefers-reduced-motion: reduce): see there for why it is not any more. */
:root[data-motion="still"] .fw-cta-card,
:root[data-motion="still"] .fw-cta-card > *,
:root[data-motion="still"] .fw-cta-kpi i { transition: none; }
:root[data-motion="still"] .fw-cta-card[data-pos="0"] .fw-cta-type { animation: none; border-right: 0; }

/* ---------- Footer ---------- */

.fw-footer { border-top: 1px solid var(--fw-line); background: var(--fw-sunken); padding: 56px 0 32px; }
.fw-footer-about { font-size: 14px; color: var(--fw-muted); margin: 16px 0 0; max-width: 320px; }
/* Site details in the footer: address, phone, email, hours, and the social profiles. */
.fw-footer-contact { list-style: none; display: grid; gap: 8px; margin: 16px 0 0; padding: 0; font-size: 14px; color: var(--fw-muted); }
.fw-footer-contact li { display: flex; align-items: flex-start; gap: 8px; white-space: pre-line; }
.fw-footer-contact .fw-icon { margin-top: 2px; }
.fw-footer-contact a { color: var(--fw-text); text-decoration: none; }
.fw-footer-contact a:hover { color: var(--fw-accent-ink); }
.fw-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fw-footer-social .fw-iconbtn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fw-newsletter { display: grid; gap: 8px; max-width: 440px; }
.fw-newsletter label { font-weight: 600; font-size: 14.5px; }
.fw-newsletter-row { display: flex; gap: 8px; }
.fw-newsletter input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: var(--fw-page); color: var(--fw-text); font: 15px var(--fw-font-body); }
.fw-newsletter button { height: 48px; padding: 0 18px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: transparent; color: var(--fw-text); font: 600 14px var(--fw-font-body); cursor: pointer; }
.fw-newsletter-note { font-size: 13px; color: var(--fw-muted); }
.fw-newsletter-done { display: flex; align-items: flex-start; gap: 10px; max-width: 440px; padding: 12px 14px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: var(--fw-ok-wash); color: var(--fw-text); font-size: 14px; line-height: 1.45; }
.fw-newsletter-done[hidden] { display: none; }
.fw-newsletter-done svg { flex: none; margin-top: 1px; color: var(--fw-ok-ink); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fw-newsletter-done:focus { outline: none; }
/* The brand, its line and the newsletter in a column of their own on the left; the links on the
   right. On a phone the column sits on top, with a rule under it. */
.fw-footer-main { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px 64px; align-items: start; padding-bottom: 40px; }
.fw-footer-side { display: grid; gap: 24px; }
.fw-footer-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px; }
@media (max-width: 959px) {
    .fw-footer-main { grid-template-columns: minmax(0, 1fr); }
    .fw-footer-side { padding-bottom: 32px; border-bottom: 1px solid var(--fw-line); }
}
.fw-footer-title { font-family: var(--fw-font-num); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fw-muted); margin-bottom: 12px; }
.fw-footer-nav ul { list-style: none; display: grid; gap: 8px; }
.fw-footer-nav a { color: var(--fw-text); text-decoration: none; font-size: 14px; }
.fw-footer-nav a:hover { color: var(--fw-accent-ink); }
.fw-footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--fw-line); font-size: 13px; color: var(--fw-muted); }
.fw-footer-bottom span { display: flex; flex-wrap: wrap; gap: 18px; }
.fw-footer-bottom button { border: 0; background: transparent; padding: 0; color: var(--fw-accent-ink); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fw-footer-spacer { height: var(--fw-cookie-space, 0px); }

.fw-wa { position: fixed; right: 16px; bottom: 20px; z-index: 45; display: inline-flex; align-items: center; gap: 8px; height: 48px; min-width: 48px; justify-content: center; padding: 0 16px; border-radius: 24px; background: var(--fw-raised); border: 1px solid var(--fw-line-2); color: var(--fw-text); text-decoration: none; font-weight: 600; font-size: 14px; box-shadow: var(--fw-shadow); white-space: nowrap; }
.fw-wa:hover { color: var(--fw-text); border-color: var(--fw-accent); }
.fw-wa svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fw-callback { position: fixed; right: 16px; bottom: 76px; z-index: 46; width: min(320px, calc(100vw - 32px)); padding: 16px; border-radius: var(--fw-radius-lg); background: var(--fw-raised); border: 1px solid var(--fw-line-2); box-shadow: var(--fw-shadow); display: grid; gap: 10px; }
.fw-callback[hidden] { display: none; }
.fw-callback h2 { font-size: 15px; font-weight: 600; }
.fw-callback p { font-size: 13px; color: var(--fw-muted); }
.fw-callback .fw-input { height: 42px; }
.fw-callback-links { display: flex; gap: 8px; flex-wrap: wrap; }
.fw-mobilebar { display: none; }

@media (max-width: 719px) {
    .fw-wa { bottom: 84px; padding: 0; }
    .fw-wa span { display: none; }
    .fw-callback { bottom: 140px; }
    .fw-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--fw-page); border-top: 1px solid var(--fw-line-2); }
    .fw-mobilebar .fw-btn { height: 48px; font-size: 15px; }
    .fw-footer-spacer { height: calc(72px + var(--fw-cookie-space, 0px)); }
    body.no-mobilebar .fw-mobilebar { display: none; }
    body.no-mobilebar .fw-wa { bottom: 20px; }
}

/* ---------- Cookie banner ---------- */

.fw-cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(440px, calc(100vw - 32px)); background: var(--fw-raised); color: var(--fw-text); border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); padding: 18px; box-shadow: var(--fw-shadow); }
.fw-cookie[hidden] { display: none; }
.fw-cookie h2 { font: 600 16px var(--fw-font-display); }
.fw-cookie p { margin: 6px 0 14px; font-size: 13px; color: var(--fw-muted); line-height: 1.5; }
.fw-cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-cookie-actions .fw-btn { height: 38px; padding: 0 14px; font-size: 13px; }
.fw-cookie-choose { display: grid; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.fw-cookie-choose[hidden] { display: none; }
.fw-cookie-choose label { display: flex; gap: 8px; align-items: center; }
@media (max-width: 719px) { .fw-cookie { bottom: 84px; } }

/* ---------- Forms (shared) ---------- */

.fw-field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.fw-field .fw-opt { font-weight: 400; color: var(--fw-muted); }
.fw-input { width: 100%; height: 48px; padding: 0 12px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: var(--fw-sunken); color: var(--fw-text); font: 15px var(--fw-font-body); }
.fw-input.is-46 { height: 46px; }
.fw-input.is-50 { height: 50px; padding: 0 14px; }
.fw-input.is-mono { font-family: var(--fw-font-num); }
.fw-input.is-upper { text-transform: uppercase; }
textarea.fw-input { height: auto; padding: 10px 12px; resize: vertical; }
select.fw-input { padding: 0 10px; }
.fw-input:focus { outline: 2px solid var(--fw-accent); outline-offset: 0; border-color: transparent; }
.fw-input[aria-invalid="true"] { border-color: var(--fw-bad-ink); }
.fw-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.fw-row2.is-170 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.fw-row2.is-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fw-row2.is-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fw-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.fw-choice { min-height: 40px; padding: 6px 12px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: transparent; color: var(--fw-text); font: 500 14px var(--fw-font-body); cursor: pointer; text-align: left; }
.fw-choice.is-sm { min-height: 38px; font-size: 13.5px; }
.fw-choice[aria-pressed="true"], .fw-choice[aria-checked="true"] { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fw-fieldset legend { font-size: 14px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.fw-error { color: var(--fw-bad-ink); font-size: 14px; }
.fw-error[hidden] { display: none; }
.fw-fine { font-size: 12.5px; color: var(--fw-muted); }
.fw-success { display: grid; gap: 14px; justify-items: start; }
.fw-success-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--fw-ok-wash); color: var(--fw-ok-ink); }
.fw-success-icon svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fw-success p { font-size: 18px; }

/* ---------- Scene rows (the explorer, the day timeline, the film) ---------- */

.fw-srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: var(--fw-page); min-height: 54px; transition: border-color 240ms; }
.fw-srow-a { font-family: var(--fw-font-num); font-size: 13px; color: var(--fw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-srow-b { font-size: 12.5px; color: var(--fw-muted); line-height: 1.35; margin-top: 2px; }
.fw-srow > div { min-width: 0; }
.fw-sroute { padding: 12px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: var(--fw-page); }
.fw-sroute-ends { display: flex; justify-content: space-between; gap: 10px; font-family: var(--fw-font-num); font-size: 12.5px; }
.fw-sroute-ends span:nth-child(2) { color: var(--fw-muted); }
.fw-sroute-track { position: relative; height: 6px; margin: 12px 4px 4px; background: var(--fw-line); border-radius: 3px; }
.fw-sroute-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fw-accent); border-radius: 3px; transition: width 900ms var(--fw-ease-io); }
.fw-sroute-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border-radius: 50%; background: var(--fw-page); border: 3px solid var(--fw-accent); transition: left 900ms var(--fw-ease-io); }
.fw-smsg { display: grid; gap: 6px; padding: 12px; border-radius: var(--fw-radius); background: var(--fw-sunken); border: 1px solid var(--fw-line); }
.fw-smsg-q { justify-self: start; max-width: 88%; padding: 8px 11px; border-radius: 10px 10px 10px 3px; background: var(--fw-raised); border: 1px solid var(--fw-line); font-size: 13px; line-height: 1.4; }
.fw-smsg-who { font-size: 10.5px; color: var(--fw-muted); font-family: var(--fw-font-num); margin-bottom: 2px; }
.fw-smsg-r { justify-self: end; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px 10px 3px 10px; background: var(--fw-accent-wash); border: 1px solid var(--fw-accent); color: var(--fw-text); font-size: 13px; font-weight: 600; }
.fw-smsg-r span { font-family: var(--fw-font-num); font-size: 10.5px; color: var(--fw-accent-ink); font-weight: 500; }
.fw-splate { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--fw-accent); box-shadow: 0 0 0 3px var(--fw-accent-wash); border-radius: var(--fw-radius); background: var(--fw-page); flex-wrap: wrap; }
.fw-splate-label { font-size: 12px; color: var(--fw-muted); }
.fw-splate-plate { background: #F7D117; color: #111; font-family: var(--fw-font-num); font-weight: 700; font-size: 20px; letter-spacing: .08em; padding: 3px 12px; border-radius: 4px; border: 1.5px solid rgba(0, 0, 0, .45); min-width: 130px; }
.fw-sbar { padding: 12px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: var(--fw-page); }
.fw-sbar-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.fw-sbar-head span:first-child { color: var(--fw-muted); }
.fw-sbar-head span:last-child { font-family: var(--fw-font-num); }
.fw-sbar-track { height: 8px; margin-top: 10px; background: var(--fw-line); border-radius: 4px; overflow: hidden; }
.fw-sbar-fill { height: 100%; border-radius: 4px; background: var(--fw-muted); transition: width 900ms var(--fw-ease-io), background 240ms; }
.fw-sbar-fill[data-s="ok"] { background: var(--fw-ok); }
.fw-sbar-fill[data-s="due"] { background: var(--fw-due); }
.fw-sbar-fill[data-s="bad"] { background: var(--fw-bad); }
.fw-sbar-fill[data-s="acc"] { background: var(--fw-accent); }

/* ---------- Hero ---------- */

.fw-hero { position: relative; border-bottom: 1px solid var(--fw-line); background: radial-gradient(ellipse 70% 60% at 70% 0%, var(--fw-accent-wash), transparent 70%); }
.fw-hero-wrap { max-width: 1192px; margin: 0 auto; padding: 56px 24px var(--fw-pad-y); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px; align-items: center; }
.fw-hero .fw-eyebrow { margin-bottom: 18px; }
.fw-hero-body { margin: 20px 0 0; max-width: 560px; }
.fw-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fw-hero-micro { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 18px; font-size: 13.5px; color: var(--fw-muted); }
.fw-hero-micro .fw-num { font-family: var(--fw-font-num); color: var(--fw-text); }
.fw-hero-fig { margin: 0; min-width: 0; }
.fw-hero-stage { position: relative; width: 100%; aspect-ratio: 720 / 520; container-type: inline-size; }
.fw-hero-stage > img, .fw-hero-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); }
.fw-figcap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--fw-muted); }
.fw-hero.is-centred .fw-hero-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 64px; gap: 40px; }
.fw-hero.is-centred .fw-hero-text { text-align: center; max-width: 820px; display: flex; flex-direction: column; align-items: center; }
.fw-hero.is-centred .fw-hero-btns, .fw-hero.is-centred .fw-hero-micro { justify-content: center; }
.fw-hero.is-centred .fw-hero-fig { width: min(100%, 980px); }
.fw-hero.is-centred.no-visual .fw-hero-wrap { padding-bottom: var(--fw-pad-y); }
.fw-hero.is-fullbleed .fw-hero-wrap { position: relative; max-width: 1600px; padding: 24px 24px var(--fw-pad-y); display: block; }
@media (min-width: 1000px) {
    .fw-hero.is-fullbleed .fw-hero-text { position: absolute; z-index: 2; left: max(24px, calc((100% - 1192px) / 2 + 24px)); top: 48px; max-width: 520px; padding: 28px; background: var(--fw-page); border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); }
    .fw-hero.is-fullbleed .fw-hero-fig { margin: 0 0 0 28%; width: 72%; }
}
@media (max-width: 999px) { .fw-hero.is-fullbleed .fw-hero-fig { margin-top: 32px; } }

/* The isometric depot scene, drawn by blocks.js into .fw-hero-stage. */
.fw-scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fw-scene-card { position: absolute; background: var(--fw-raised); border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); padding: .55em .8em; font-size: clamp(9px, 1.8cqw, 13px); box-shadow: var(--fw-shadow); white-space: nowrap; display: flex; align-items: center; gap: .6em; color: var(--fw-text); opacity: 0; transform: translate(-50%, -70%); transition: left 700ms var(--fw-ease-io), top 700ms var(--fw-ease-io), transform 600ms var(--fw-ease), opacity 500ms; pointer-events: none; }
.fw-scene-card.is-shown { opacity: 1; transform: translate(-50%, -100%); }
.fw-scene-card.is-flying { opacity: 1; transform: translate(-50%, -50%) scale(.45); }
.fw-scene-card i { width: .55em; height: .55em; border-radius: 50%; flex: none; }
.fw-scene-card b { display: block; font-weight: 600; }
.fw-scene-card small { display: block; font-family: var(--fw-font-num); font-size: .85em; color: var(--fw-muted); }
.fw-scene-win { position: absolute; left: 61%; top: 3%; width: 37%; background: var(--fw-raised); border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); box-shadow: var(--fw-shadow); font-size: clamp(8px, 1.55cqw, 11.5px); overflow: hidden; color: var(--fw-text); pointer-events: none; }
.fw-scene-win-head { display: flex; align-items: center; gap: .6em; padding: .7em .9em; border-bottom: 1px solid var(--fw-line); background: var(--fw-surface); }
.fw-scene-win-head i { width: .8em; height: .8em; border-radius: 2px; background: var(--fw-accent); }
.fw-scene-win-head b { font-weight: 600; }
.fw-scene-win-head span { margin-left: auto; font-family: var(--fw-font-num); color: var(--fw-muted); }
.fw-scene-feed { padding: .5em .7em; display: grid; gap: .35em; }
.fw-scene-feed div { display: flex; align-items: center; gap: .6em; padding: .45em .5em; border-radius: var(--fw-radius); transition: background 480ms; }
.fw-scene-feed div.is-new { background: var(--fw-accent-wash); }
.fw-scene-feed i { width: .5em; height: .5em; border-radius: 50%; flex: none; }
.fw-scene-feed span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-scene-feed em { font-style: normal; font-family: var(--fw-font-num); color: var(--fw-muted); }

/* ---------- Tools merge ---------- */

.fw-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; align-items: center; }
.fw-tools-list { display: grid; gap: 10px; }
.fw-tool { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--fw-radius-lg); border: 1px dashed var(--fw-line-2); background: var(--fw-raised); transition: opacity 480ms, transform 480ms var(--fw-ease); }
.fw-tool > div { flex: 1; min-width: 0; }
.fw-tool-name { font-weight: 600; font-size: 15px; }
.fw-tool-file { font-family: var(--fw-font-num); font-size: 12.5px; color: var(--fw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-tool-arrow { fill: none; stroke: var(--fw-line-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: stroke 480ms; }
.fw-tool.is-merged { opacity: .45; transform: translateX(10px) scale(.98); }
.fw-tool.is-merged .fw-tool-file { text-decoration: line-through; }
.fw-tool.is-merged .fw-tool-arrow { stroke: var(--fw-accent); }
.fw-window { border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); box-shadow: var(--fw-shadow); overflow: hidden; min-width: 0; }
.fw-window-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--fw-line); font-family: var(--fw-font-num); font-size: 12px; color: var(--fw-muted); gap: 10px; }
.fw-window-head button { height: 28px; padding: 0 10px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: transparent; color: var(--fw-text); font: 500 12px var(--fw-font-body); cursor: pointer; }
.fw-window-body { padding: 14px; display: grid; gap: 8px; }
.fw-merge-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line); background: transparent; opacity: .4; transform: translateX(-8px); transition: all 480ms var(--fw-ease); }
.fw-merge-row > div { flex: 1; min-width: 0; }
.fw-merge-row b { display: block; font-weight: 600; font-size: 14.5px; }
.fw-merge-row small { display: block; font-size: 13px; color: var(--fw-muted); }
.fw-merge-row.is-merged { border-color: var(--fw-line-2); background: var(--fw-page); opacity: 1; transform: none; }

/* ---------- Module explorer ---------- */

/* The tiles are one row that slides: native scroll (swipe, trackpad, drag in blocks.js) snapped
   to a tile, with a fade on the side that has more. The 4px padding keeps the chosen tile's ring
   inside the scroll box, and the negative margin keeps the row on the page's edges. */
.fw-slider { --fw-per: 6; }
.fw-tiles { --fw-fade-l: 0px; --fw-fade-r: 0px; display: flex; gap: 8px; margin: -4px; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, black var(--fw-fade-l), black calc(100% - var(--fw-fade-r)), transparent); mask-image: linear-gradient(90deg, transparent, black var(--fw-fade-l), black calc(100% - var(--fw-fade-r)), transparent); }
.fw-tiles::-webkit-scrollbar { display: none; }
.fw-tiles.has-more-l { --fw-fade-l: 36px; }
.fw-tiles.has-more-r { --fw-fade-r: 36px; }
.fw-tiles.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.fw-tiles.is-dragging .fw-tile { cursor: grabbing; }
.fw-tiles > .fw-tile { flex: 0 0 calc((100% - (var(--fw-per) - 1) * 8px) / var(--fw-per)); scroll-snap-align: start; }
.fw-slider-bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.fw-slider-count { font-family: var(--fw-font-num); font-size: 12px; color: var(--fw-muted); white-space: nowrap; }
.fw-slider-count b { font-weight: 500; color: var(--fw-text); }
.fw-slider-progress { flex: 1; height: 2px; margin: 0 8px; border-radius: 1px; background: var(--fw-line); overflow: hidden; }
.fw-slider-progress i { display: block; height: 100%; background: var(--fw-accent); transition: width 480ms var(--fw-ease); }
@media (max-width: 1099px) { .fw-slider { --fw-per: 5; } }
@media (max-width: 919px) { .fw-slider { --fw-per: 4; } }
@media (max-width: 719px) { .fw-slider { --fw-per: 3.3; } }
@media (max-width: 479px) { .fw-slider { --fw-per: 2.3; } }
:root[data-motion="still"] .fw-slider-progress i { transition: none; }
.fw-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; padding: 14px; text-align: left; cursor: pointer; border-radius: var(--fw-radius-lg); font: inherit; color: var(--fw-text); background: transparent; border: 1px solid var(--fw-line); transition: border-color 240ms, background 240ms; }
.fw-tile.is-soon { border-style: dashed; border-color: var(--fw-line-2); }
.fw-tile[aria-selected="true"] { background: var(--fw-page); border: 1px solid var(--fw-accent); box-shadow: 0 0 0 3px var(--fw-accent-wash); }
.fw-tile-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.fw-explorer-panel { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: center; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-page); }
.fw-explorer-panel h3 { margin: 14px 0 6px; }
.fw-explorer-line { margin: 0 0 18px; color: var(--fw-muted); font-size: 16px; }
.fw-explorer-cta { display: inline-flex; margin-top: 22px; font-weight: 600; }
.fw-stage { border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); background: var(--fw-raised); box-shadow: var(--fw-shadow); overflow: hidden; transition: box-shadow 480ms; }
.fw-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--fw-line); background: var(--fw-surface); }
.fw-stage-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.fw-stage-title i { width: 8px; height: 8px; border-radius: 2px; background: var(--fw-accent); flex: none; }
.fw-stage-co { font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-muted); white-space: nowrap; }
.fw-stage-body { padding: 14px; display: grid; gap: 8px; min-height: 236px; align-content: start; }
.fw-stage-foot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--fw-line); }
.fw-dots { display: flex; gap: 4px; }
.fw-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--fw-line-2); transition: width 240ms, background 240ms; }
.fw-dots i.is-on { width: 18px; background: var(--fw-accent); }
.fw-stage-cap { flex: 1; font-size: 13px; min-width: 0; }
.fw-caption { font-size: 12.5px; color: var(--fw-muted); margin-top: 8px; }
.fw-accordion-mods { display: none; }
@media (max-width: 719px) {
    .fw-explorer.is-accordion .fw-slider, .fw-explorer.is-accordion .fw-explorer-panel { display: none; }
    .fw-explorer.is-accordion .fw-accordion-mods { display: block; border-top: 1px solid var(--fw-line); }
}

/* ---------- Day timeline ("A day in the fleet", 1 Oct 2026) ----------
   The day is a ruler of stops (a tablist) with the sun riding along it as the day plays; under it
   the step in words beside what the system did by itself; under that the three screens the step
   touches, stood on a shallow arc. The one who acted (.is-actor) comes forward, the ones who were
   told (.is-told) take an accent edge, and the signal (.fw-day-link i) runs between them. Panels
   share one grid cell, so the block is as tall as its longest step and never jumps as it plays. */
.fw-day-head { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.fw-day-head > div { max-width: 720px; }
.fw-day-head .fw-lead { margin-top: 14px; }
.fw-day-play, .fw-auto-play { height: 40px; padding: 0 14px; font-size: 13px; border-color: var(--fw-line-2); }

.fw-day-ruler { margin: 0 0 26px; }
.fw-day-stops { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding-top: 4px; }
.fw-day-track { position: absolute; left: 0; top: 17px; width: 100%; height: 2px; border-radius: 1px; background: var(--fw-line-2); pointer-events: none; }
.fw-day-fill { position: absolute; left: 0; top: 0; width: 0; height: 100%; border-radius: 1px; background: var(--fw-accent); }
.fw-day-sun { position: absolute; z-index: 2; right: -12px; top: -11px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--fw-accent); background: var(--fw-page); color: var(--fw-accent-ink); box-shadow: 0 0 0 4px var(--fw-accent-wash); }
.fw-day-sun svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fw-day-moon-i, .fw-day-ruler.is-night .fw-day-sun-i { display: none; }
.fw-day-ruler.is-night .fw-day-moon-i { display: block; }
.fw-day-stop { position: relative; min-width: 0; display: grid; justify-items: start; align-content: start; gap: 3px; padding: 0 8px 6px 0; border: 0; border-radius: var(--fw-radius); background: transparent; color: var(--fw-muted); font: inherit; text-align: left; cursor: pointer; }
.fw-day-stop-dot { width: 12px; height: 12px; margin: 8px 0 10px; border-radius: 50%; border: 2px solid var(--fw-line-2); background: var(--fw-page); transition: border-color 240ms, background 240ms; }
.fw-day-stop-time { font-family: var(--fw-font-num); font-size: 13px; color: var(--fw-text); }
.fw-day-stop-name { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 240ms; }
.fw-day-stop:hover .fw-day-stop-name { color: var(--fw-text); }
.fw-day-stop.is-done .fw-day-stop-dot { border-color: var(--fw-accent); background: var(--fw-accent); }
.fw-day-stop[aria-selected="true"] .fw-day-stop-dot { border-color: var(--fw-accent); }
.fw-day-stop[aria-selected="true"] .fw-day-stop-time { color: var(--fw-accent-ink); }
.fw-day-stop[aria-selected="true"] .fw-day-stop-name { color: var(--fw-text); font-weight: 600; }
.fw-day-stop:focus-visible { outline-offset: 3px; }

.fw-day-body { display: grid; gap: 28px; }
.fw-day-panels { display: grid; }
.fw-day-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 18px 56px; align-items: start; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--fw-ease), transform 480ms var(--fw-ease), visibility 0s 480ms; }
.fw-day-panel.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 360ms var(--fw-ease) 60ms, transform 480ms var(--fw-ease) 60ms, visibility 0s; }
.fw-day-what { min-width: 0; }
.fw-day-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.fw-day-time { font-family: var(--fw-font-num); font-size: clamp(38px, 4.2vw, 54px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.fw-day-where { font-family: var(--fw-font-num); font-size: 12px; padding: 3px 8px; border-radius: var(--fw-radius); background: var(--fw-accent-wash); color: var(--fw-accent-ink); }
.fw-day-text { margin-top: 10px; max-width: 600px; font-size: 16.5px; color: var(--fw-muted); text-wrap: pretty; }
.fw-day-auto { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; padding: 16px 18px; border: 1px solid var(--fw-line-2); border-left: 3px solid var(--fw-accent); border-radius: var(--fw-radius); background: var(--fw-raised); }
.fw-section.is-raised .fw-day-auto { background: var(--fw-page); }
.fw-day-auto b { display: block; font-size: 13px; font-weight: 600; color: var(--fw-accent-ink); }
.fw-day-auto p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--fw-text); text-wrap: pretty; }
.fw-day-auto-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--fw-accent-wash); color: var(--fw-accent-ink); }
.fw-day-cog { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fw-day-panel.is-on .fw-day-cog { animation: fw-spin 9s linear infinite; }
@keyframes fw-spin { to { transform: rotate(360deg); } }

.fw-day-fig { margin: 0; min-width: 0; }
.fw-day-stage { position: relative; isolation: isolate; perspective: 1500px; perspective-origin: 50% 20%; }
.fw-day-stage::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -22px; height: 80px; border-radius: 50%; background: radial-gradient(closest-side, var(--fw-accent-wash), transparent); pointer-events: none; }
.fw-day-rig { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) 40px minmax(0, 1.25fr) 40px minmax(0, 1fr); align-items: center; padding: 40px 0 14px; transform-style: preserve-3d; transform: rotateX(5deg); }
.fw-day-pane { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); box-shadow: var(--fw-shadow); transition: transform 760ms var(--fw-ease), border-color 420ms, box-shadow 420ms; }
.fw-day-pane.is-driver { border-radius: 26px 26px 14px 14px; transform: rotateY(15deg); transform-origin: 100% 50%; }
.fw-day-pane.is-driver::before { content: ""; position: absolute; left: 50%; top: 7px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--fw-line-2); }
.fw-day-pane.is-driver .fw-day-pane-head { padding-top: 20px; }
.fw-day-pane.is-customer { border-radius: 16px; transform: rotateY(-15deg); transform-origin: 0 50%; }
.fw-day-pane.is-told { border-color: color-mix(in srgb, var(--fw-accent) 50%, var(--fw-line-2)); }
.fw-day-pane.is-actor { border-color: var(--fw-accent); box-shadow: 0 0 0 3px var(--fw-accent-wash), var(--fw-shadow); }
.fw-day-pane.is-driver.is-actor { transform: rotateY(9deg) translateZ(46px); }
.fw-day-pane.is-office.is-actor { transform: translateZ(46px); }
.fw-day-pane.is-customer.is-actor { transform: rotateY(-9deg) translateZ(46px); }
.fw-day-pane-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--fw-line); background: var(--fw-surface); font-size: 12.5px; font-weight: 600; }
.fw-day-pane-icon { fill: none; stroke: var(--fw-accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fw-day-pane-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-day-pane-meta { flex: none; font-family: var(--fw-font-num); font-size: 11px; font-weight: 400; color: var(--fw-muted); }
.fw-day-lines { --row: 46px; display: grid; gap: 6px; align-content: start; padding: 10px; min-height: calc(var(--n, 2) * var(--row) + (var(--n, 2) - 1) * 6px + 20px); }
.fw-day-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--row); padding: 7px 10px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: var(--fw-page); font-size: 12.5px; line-height: 1.35; animation: fw-day-in 460ms var(--fw-ease) calc(var(--k, 0) * 140ms + 260ms) both; }
.fw-day-line-t { min-width: 0; text-wrap: pretty; }
.fw-day-line[data-k="msg"] { display: block; justify-self: start; max-width: 94%; border-radius: 12px 12px 12px 3px; border-color: var(--fw-line-2); background: var(--fw-surface); }
.fw-day-line[data-k="q"] { display: grid; gap: 8px; border-color: var(--fw-line-2); border-radius: 10px; background: var(--fw-surface); }
.fw-day-ans { justify-self: end; min-width: 64px; height: 28px; padding: 0 14px; display: inline-grid; place-items: center; border: 1px solid var(--fw-btn-border); border-radius: 7px; background: var(--fw-btn-bg); color: var(--fw-btn-ink); font-weight: 600; animation: fw-day-press 520ms var(--fw-ease) calc(var(--k, 0) * 140ms + 1100ms) both; }
/* Rows written before the redesign (the JSON "rows"), drawn in a narrower screen than they were. */
.fw-day-lines .fw-srow { flex-wrap: wrap; min-height: var(--row); padding: 7px 10px; }
.fw-day-lines .fw-srow-a { white-space: normal; font-size: 12.5px; }
.fw-day-idle { display: grid; place-items: center; min-height: var(--row); padding: 8px; border: 1px dashed var(--fw-line-2); border-radius: var(--fw-radius); font-size: 12.5px; color: var(--fw-muted); text-align: center; }
.fw-day-link { position: relative; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--fw-line-2) 0 4px, transparent 4px 8px); }
.fw-day-link i { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--fw-accent); box-shadow: 0 0 0 4px var(--fw-accent-wash); opacity: 0; }
.fw-day-link.is-run i { animation: fw-day-run 820ms var(--fw-ease-io) var(--d, 0ms) both; }
.fw-day-link.is-run[data-dir="l"] i { animation-name: fw-day-run-l; }
.fw-day-sys { position: absolute; left: 50%; top: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--fw-accent); border-radius: 14px; background: var(--fw-page); color: var(--fw-accent-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px) translateZ(70px); transition: opacity 360ms, transform 520ms var(--fw-ease); pointer-events: none; }
.fw-day-stage[data-actor="system"] .fw-day-sys { opacity: 1; transform: translate(-50%, 0) translateZ(70px); }
.fw-day-stage[data-actor="system"] .fw-day-sys .fw-day-cog { animation: fw-spin 6s linear infinite; }
@keyframes fw-day-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fw-day-press { 0% { transform: scale(1); } 40% { transform: scale(.9); box-shadow: 0 0 0 0 var(--fw-accent-wash); } 100% { transform: none; box-shadow: 0 0 0 7px transparent; } }
@keyframes fw-day-run { 0% { left: 0; opacity: 0; } 18%, 82% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes fw-day-run-l { 0% { left: 100%; opacity: 0; } 18%, 82% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@media (max-width: 1099px) {
    .fw-day-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
    .fw-day-stops { grid-auto-columns: minmax(108px, 1fr); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -24px; padding: 4px 24px 0; scroll-padding-inline: 24px; }
    .fw-day-stops::-webkit-scrollbar { display: none; }
    .fw-day-stop { scroll-snap-align: start; }
    .fw-day-stage { perspective: none; }
    .fw-day-stage::after { display: none; }
    .fw-day-rig { display: flex; flex-direction: column; align-items: stretch; padding: 0; transform: none; }
    .fw-day-pane, .fw-day-pane.is-driver, .fw-day-pane.is-customer, .fw-day-pane.is-actor, .fw-day-pane.is-driver.is-actor, .fw-day-pane.is-customer.is-actor, .fw-day-pane.is-office.is-actor { transform: none; }
    .fw-day-link { width: 2px; height: 24px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--fw-line-2) 0 4px, transparent 4px 8px); }
    .fw-day-link i { left: 50%; top: 0; }
    .fw-day-link.is-run i { animation-name: fw-day-run-d; }
    .fw-day-link.is-run[data-dir="l"] i { animation-name: fw-day-run-u; }
    .fw-day-sys { position: static; align-self: center; order: -1; margin-bottom: 10px; transform: none; display: none; }
    .fw-day-stage[data-actor="system"] .fw-day-sys { display: inline-flex; transform: none; }
}
@keyframes fw-day-run-d { 0% { top: 0; opacity: 0; } 18%, 82% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fw-day-run-u { 0% { top: 100%; opacity: 0; } 18%, 82% { opacity: 1; } 100% { top: 0; opacity: 0; } }
:root[data-motion="still"] .fw-day-panel,
:root[data-motion="still"] .fw-day-pane,
:root[data-motion="still"] .fw-day-sys { transition: none; }
:root[data-motion="still"] .fw-day-line,
:root[data-motion="still"] .fw-day-ans,
:root[data-motion="still"] .fw-day-link i,
:root[data-motion="still"] .fw-day-cog { animation: none !important; }

/* ---------- Automation engine ("It does the work by itself", 1 Oct 2026) ----------
   Every automation is a lane across one board: when it runs and the moment that sets it off, the
   engine's column (what the system does), and what you see at the end. The engine is one tall
   panel behind the middle column (.fw-auto-lanes::before) under a cap with a turning rotor; the
   lane firing (.is-fire) sends a signal in, lights its part of the engine and lands its result.
   On a phone each lane is a card with the signal running down its rail. */
.fw-auto-head { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }
.fw-auto-head > div { max-width: 700px; }
.fw-auto-head .fw-lead { margin-top: 14px; }
.fw-auto-board { --c1: 250px; --cw: 44px; --c3: 252px; position: relative; }
.fw-auto-cols, .fw-auto-lane { display: grid; grid-template-columns: var(--c1) var(--cw) minmax(0, 1fr) var(--cw) var(--c3); }
.fw-auto-cols { align-items: end; }
.fw-auto-col { grid-column: 1; padding: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--fw-muted); }
.fw-auto-col.is-see { grid-column: 5; }
.fw-auto-core { grid-column: 3; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border: 1px solid var(--fw-line-2); border-bottom: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg) var(--fw-radius-lg) 0 0; background: var(--fw-surface); }
.fw-auto-rotor { position: relative; flex: none; width: 50px; height: 50px; display: grid; place-items: center; transform-style: preserve-3d; color: var(--fw-accent-ink); }
.fw-auto-rotor i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--fw-accent); }
.fw-auto-rotor i:nth-child(1) { transform: rotateX(66deg); animation: fw-auto-r1 5s linear infinite; }
.fw-auto-rotor i:nth-child(2) { border-color: var(--fw-line-2); transform: rotateY(66deg); animation: fw-auto-r2 7s linear infinite; }
.fw-auto-rotor i:nth-child(3) { inset: 9px; border-style: dashed; transform: rotateX(-40deg) rotateY(30deg); animation: fw-auto-r3 4s linear infinite; }
.fw-auto-cog { position: relative; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; animation: fw-spin 8s linear infinite; }
@keyframes fw-auto-r1 { to { transform: rotateX(66deg) rotateZ(360deg); } }
@keyframes fw-auto-r2 { to { transform: rotateY(66deg) rotateX(360deg); } }
@keyframes fw-auto-r3 { to { transform: rotateX(-40deg) rotateY(390deg); } }
.fw-auto-core-t { min-width: 0; }
.fw-auto-core-t b { display: block; font-family: var(--fw-font-display); font-size: 17px; font-weight: 600; line-height: 1.2; }
.fw-auto-core-t small { display: block; margin-top: 3px; font-family: var(--fw-font-num); font-size: 12px; color: var(--fw-muted); }
.fw-auto-lanes { position: relative; list-style: none; }
.fw-auto-lanes::before, .fw-auto-lanes::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--c1) + var(--cw)); right: calc(var(--c3) + var(--cw)); pointer-events: none; }
.fw-auto-lanes::before { border: 1px solid var(--fw-line-2); border-top: 0; border-radius: 0 0 var(--fw-radius-lg) var(--fw-radius-lg); background: var(--fw-surface); }
.fw-auto-lanes::after { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--fw-accent) 10%, transparent), transparent) 0 -180px / 100% 180px no-repeat; animation: fw-auto-scan 7s linear infinite; }
@keyframes fw-auto-scan { to { background-position: 0 calc(100% + 180px); } }
.fw-auto-lane { position: relative; }
.fw-auto-when, .fw-auto-out { border-top: 1px solid var(--fw-line); }
.fw-auto-lane:last-child .fw-auto-when, .fw-auto-lane:last-child .fw-auto-out { border-bottom: 1px solid var(--fw-line); }
.fw-auto-when { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; min-width: 0; }
.fw-auto-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); background: var(--fw-page); transition: background 320ms, border-color 320ms; }
.fw-auto-when-body { min-width: 0; display: grid; gap: 6px; }
.fw-auto-when-t { font-family: var(--fw-font-num); font-size: 12.5px; color: var(--fw-accent-ink); }
.fw-auto-trig { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; line-height: 1.35; }
.fw-auto-trig-t { min-width: 0; }
.fw-auto-wire { position: relative; align-self: center; height: 2px; background: repeating-linear-gradient(90deg, var(--fw-line-2) 0 4px, transparent 4px 8px); }
.fw-auto-wire b { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--fw-accent); box-shadow: 0 0 0 4px var(--fw-accent-wash); opacity: 0; }
.fw-auto-what { position: relative; z-index: 1; min-width: 0; padding: 16px 22px; border-top: 1px dashed var(--fw-line); }
.fw-auto-lane:first-child .fw-auto-what { border-top: 0; }
.fw-auto-what h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.fw-auto-what p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--fw-muted); text-wrap: pretty; }
.fw-auto-out { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 16px 0; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.fw-auto-lane.is-fire .fw-auto-icon { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-auto-lane.is-fire .fw-auto-wire b { animation: fw-auto-run 520ms var(--fw-ease-io) both; }
.fw-auto-lane.is-fire .fw-auto-wire.is-out b { animation-delay: 820ms; }
.fw-auto-lane.is-fire .fw-auto-what { background-color: color-mix(in srgb, var(--fw-accent) 7%, transparent); box-shadow: inset 3px 0 0 var(--fw-accent); animation: fw-auto-glow 1500ms ease 360ms both; }
.fw-auto-lane.is-fire .fw-auto-out-t { color: var(--fw-text); font-weight: 600; }
.fw-auto-lane.is-fire .fw-auto-out .fw-chip { animation: fw-auto-pop 640ms var(--fw-ease) 1260ms both; }
@keyframes fw-auto-run { 0% { left: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes fw-auto-glow { 0% { background-color: transparent; box-shadow: inset 0 0 0 transparent; } 30%, 60% { background-color: var(--fw-accent-wash); } }
@keyframes fw-auto-pop { 0% { transform: scale(.82); } 55% { transform: scale(1.08); box-shadow: 0 0 0 6px var(--fw-accent-wash); } 100% { transform: none; box-shadow: 0 0 0 0 transparent; } }
@keyframes fw-auto-run-v { 0% { top: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fw-auto-glow-m { 0% { background-color: var(--fw-surface); box-shadow: inset 0 0 0 transparent; } 30%, 60% { background-color: var(--fw-accent-wash); } }
@media (max-width: 1099px) { .fw-auto-board { --c1: 210px; --cw: 32px; --c3: 210px; } }
@media (max-width: 899px) {
    .fw-auto-cols { display: flex; margin-bottom: 12px; }
    .fw-auto-col { display: none; }
    .fw-auto-core { flex: 1; border-bottom: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); }
    .fw-auto-lanes { display: grid; gap: 10px; }
    .fw-auto-lanes::before, .fw-auto-lanes::after { display: none; }
    .fw-auto-lane { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "icon when" "what what" "out out"; gap: 0 12px; padding: 14px 14px 14px 16px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-page); }
    .fw-section.is-raised .fw-auto-lane { background: var(--fw-page); }
    .fw-auto-when { display: contents; }
    .fw-auto-icon { grid-area: icon; }
    .fw-auto-when-body { grid-area: when; align-self: center; }
    .fw-auto-when, .fw-auto-out, .fw-auto-lane:last-child .fw-auto-when, .fw-auto-lane:last-child .fw-auto-out { border: 0; }
    /* The signal runs down the card's left edge. */
    .fw-auto-wire { position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; height: auto; background: transparent; }
    .fw-auto-wire.is-out { display: none; }
    .fw-auto-wire b { left: 50%; top: 0; }
    .fw-auto-lane.is-fire .fw-auto-wire b { animation-name: fw-auto-run-v; animation-duration: 1400ms; }
    .fw-auto-what { grid-area: what; margin-top: 12px; padding: 12px 14px; border: 0; border-radius: var(--fw-radius); background: var(--fw-surface); }
    .fw-auto-lane.is-fire { border-color: color-mix(in srgb, var(--fw-accent) 50%, var(--fw-line)); }
    .fw-auto-lane.is-fire .fw-auto-what { background-color: color-mix(in srgb, var(--fw-accent) 7%, var(--fw-surface)); animation-name: fw-auto-glow-m; }
    .fw-auto-out { grid-area: out; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 0 0; }
    .fw-auto-out.is-empty { display: none; }
}
[data-fw-auto="0"] .fw-auto-rotor i,
[data-fw-auto="0"] .fw-auto-cog,
[data-fw-auto="0"] .fw-auto-lanes::after,
:root[data-motion="still"] .fw-auto-rotor i,
:root[data-motion="still"] .fw-auto-cog,
:root[data-motion="still"] .fw-auto-lanes::after,
:root[data-motion="still"] .fw-auto-lane.is-fire .fw-auto-wire b,
:root[data-motion="still"] .fw-auto-lane.is-fire .fw-auto-what,
:root[data-motion="still"] .fw-auto-lane.is-fire .fw-auto-out .fw-chip { animation: none !important; }
:root[data-motion="still"] .fw-auto-icon { transition: none; }

/* ---------- Brand preview ---------- */

.fw-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: center; }
.fw-2col.is-start { align-items: start; }
.fw-2col.is-420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.fw-2col.is-48 { gap: 48px; }
.fw-brand-copy .fw-lead { margin: 16px 0 22px; }
.fw-brand-copy .fw-ticks { margin-bottom: 24px; }
.fw-tryit { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); }
.fw-tryit-title { font-size: 14px; font-weight: 600; }
.fw-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fw-swatch { width: 44px; height: 44px; border-radius: var(--fw-radius); cursor: pointer; border: 2px solid transparent; outline-offset: -4px; }
.fw-swatch.is-40 { width: 40px; height: 40px; }
.fw-swatch[aria-pressed="true"], .fw-swatch[aria-checked="true"] { border-color: var(--fw-text); outline: 2px solid var(--fw-page); }
.fw-picker { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); font-size: 13px; cursor: pointer; }
.fw-picker.is-40 { height: 40px; padding: 0 10px; }
.fw-picker input[type=color] { width: 28px; height: 28px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.fw-upload { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); font-size: 14px; font-weight: 600; cursor: pointer; }
.fw-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fw-tryit-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fw-tryit-row .fw-input { flex: 1; min-width: 180px; height: 44px; }
.fw-mock { border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-page); box-shadow: var(--fw-shadow); overflow: hidden; min-width: 0; --pv: #2F6FEB; --pv-ink: #fff; --pv-text: #6f9cff; --pv-wash: #2F6FEB22; }
.fw-mock-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--fw-line); background: var(--fw-raised); }
.fw-mock-logo { height: 28px; max-width: 110px; object-fit: contain; }
.fw-mock-initials { width: 28px; height: 28px; border-radius: var(--fw-radius); background: var(--pv); color: var(--pv-ink); display: grid; place-items: center; font: 700 12px var(--fw-font-display); flex: none; }
.fw-mock-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-mock-search { margin-left: auto; height: 28px; width: min(34%, 160px); border-radius: var(--fw-radius); background: var(--fw-sunken); border: 1px solid var(--fw-line); flex: none; }
.fw-mock-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--pv-wash); border: 1px solid var(--pv); flex: none; }
.fw-mock-body { display: grid; grid-template-columns: minmax(0, 148px) minmax(0, 1fr); min-height: 330px; }
.fw-mock-side { border-right: 1px solid var(--fw-line); padding: 10px 8px; display: grid; gap: 2px; align-content: start; background: var(--fw-raised); }
.fw-mock-side span { padding: 7px 9px; border-radius: var(--fw-radius); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fw-muted); }
.fw-mock-side span.is-on { background: var(--pv-wash); color: var(--pv-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--pv); }
.fw-mock-main { padding: 16px; min-width: 0; }
.fw-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fw-mock-head b { font-family: var(--fw-font-display); font-weight: 600; font-size: 18px; }
.fw-mock-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--fw-radius); background: var(--pv); color: var(--pv-ink); font-weight: 600; font-size: 13px; white-space: nowrap; }
.fw-mock-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--fw-line); margin-bottom: 10px; font-size: 13px; }
.fw-mock-tabs span { padding: 6px 0; color: var(--fw-muted); }
.fw-mock-tabs span.is-on { border-bottom: 2px solid var(--pv); color: var(--pv-text); font-weight: 600; }
.fw-mock-rows { display: grid; gap: 6px; }
.fw-mock-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); font-size: 12.5px; }
.fw-mock-row em { flex: 1; font-style: normal; color: var(--fw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-mock-row .fw-chip { height: auto; padding: 2px 7px; font-size: 11px; }
.fw-mock-note { margin-top: 14px; padding: 12px; border-radius: var(--fw-radius); background: var(--pv-wash); font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.fw-mock-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--pv); flex: none; }
@media (max-width: 520px) { .fw-mock-body { grid-template-columns: minmax(0, 1fr); } .fw-mock-side { display: none; } }

/* ---------- Device showcase ---------- */

.fw-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: 20px; justify-items: center; }
.fw-phone-fig { margin: 0; width: 100%; max-width: 260px; }
.fw-phone { aspect-ratio: 9 / 18.5; border: 1px solid var(--fw-line-2); border-radius: 34px; padding: 9px; background: var(--fw-sunken); }
.fw-phone-screen { height: 100%; border-radius: 26px; background: var(--fw-page); overflow: hidden; display: flex; flex-direction: column; font-size: 12px; }
.fw-phone-screen > img, .fw-phone-screen > video { width: 100%; height: 100%; object-fit: cover; }
.fw-phone-status { display: flex; justify-content: space-between; padding: 10px 16px 6px; font-family: var(--fw-font-num); font-size: 10px; color: var(--fw-muted); }
.fw-phone-head { padding: 6px 14px 10px; }
.fw-phone-head b { display: block; font-family: var(--fw-font-display); font-weight: 600; font-size: 18px; }
.fw-phone-head small { display: block; color: var(--fw-muted); font-size: 11.5px; }
.fw-phone-list { padding: 0 10px; display: grid; gap: 6px; }
.fw-pjob { padding: 10px; border-radius: 10px; border: 1px solid var(--fw-line); }
.fw-pjob.is-next { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-pjob-top { display: flex; justify-content: space-between; font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-muted); }
.fw-pjob.is-next .fw-pjob-top { color: var(--fw-text); }
.fw-pjob-top span:last-child { color: var(--fw-accent-ink); }
.fw-pjob b { display: block; font-weight: 600; margin-top: 3px; }
.fw-pjob small { display: block; font-family: var(--fw-font-num); font-size: 10.5px; color: var(--fw-muted); }
.fw-pcheck { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--fw-line); }
.fw-pcheck b { color: var(--fw-ok-ink); font-weight: 700; }
.fw-pcheck.is-fail { display: block; border-color: var(--fw-bad-ink); background: var(--fw-bad-wash); }
.fw-pcheck.is-fail div { display: flex; justify-content: space-between; }
.fw-pcheck.is-fail b { color: var(--fw-bad-ink); }
.fw-pcheck-photo { margin-top: 6px; height: 46px; border-radius: 6px; border: 1px dashed var(--fw-bad-ink); display: grid; place-items: center; font-size: 10.5px; color: var(--fw-bad-ink); }
.fw-pphotos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fw-pphotos span { aspect-ratio: 1; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--fw-surface) 0 6px, var(--fw-raised) 6px 12px); display: grid; place-items: center; font-size: 10px; color: var(--fw-muted); }
.fw-psign { border-radius: 8px; border: 1px solid var(--fw-line); padding: 8px; }
.fw-psign small { font-size: 10.5px; color: var(--fw-muted); }
.fw-psign svg { fill: none; stroke: var(--fw-text); stroke-width: 1.6; stroke-linecap: round; }
.fw-pbtn { height: 38px; border-radius: 8px; background: var(--fw-btn-bg); color: var(--fw-btn-ink); border: 1px solid var(--fw-btn-border); display: grid; place-items: center; font-weight: 600; }
.fw-ptrack { list-style: none; padding: 0 16px; display: grid; }
.fw-ptrack li { display: flex; gap: 10px; padding-bottom: 14px; border-left: 2px solid var(--fw-accent); margin-left: 5px; padding-left: 12px; position: relative; }
.fw-ptrack li::before { content: ""; position: absolute; left: -7px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--fw-accent); }
.fw-ptrack li.is-now { border-left: 2px dashed var(--fw-line-2); }
.fw-ptrack li.is-now::before { left: -8px; top: 0; width: 14px; height: 14px; background: var(--fw-page); border: 3px solid var(--fw-accent); box-sizing: border-box; }
.fw-ptrack li.is-later { border-left: 0; padding-left: 14px; padding-bottom: 0; color: var(--fw-muted); }
.fw-ptrack li.is-later::before { left: -6px; background: transparent; border: 2px solid var(--fw-line-2); box-sizing: border-box; }
.fw-ptrack small { color: var(--fw-muted); font-size: 11px; }
.fw-phone-cap { text-align: center; font-size: 14px; font-weight: 600; margin-top: 12px; }
.fw-center-note { text-align: center; font-size: 13px; color: var(--fw-muted); margin: 24px 0 0; }
.fw-frame { border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-sunken); padding: 8px; box-shadow: var(--fw-shadow); }
.fw-frame.is-browser { padding: 0; overflow: hidden; }
.fw-frame-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--fw-line); background: var(--fw-surface); }
.fw-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--fw-line-2); }
.fw-frame img, .fw-frame video { display: block; width: 100%; border-radius: calc(var(--fw-radius-lg) - 4px); }
.fw-screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }

/* ---------- 3D product tour (ProductOrbit) ----------
   Without script, on a phone, and in the builder's narrow preview the panels are one row that
   scrolls sideways, snapping to a panel. On a wide screen blocks.js adds .is-ring: the same panels
   stand round a ring (each turned --i steps and pushed out by the radius, --fw-orbit-r) and the
   ring turns by --fw-orbit-a. --d (0 at the front, 1 at the back) dims the panels turning away. */
.fw-orbit-intro { display: grid; gap: 18px; justify-items: start; }
.fw-orbit-stage { --fw-orbit-w: 300px; --fw-orbit-h: 476px; position: relative; }
.fw-orbit-ring { position: relative; list-style: none; display: flex; gap: 14px; margin: -4px; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fw-orbit-ring::-webkit-scrollbar { display: none; }
.fw-orbit-panel { flex: 0 0 min(86%, var(--fw-orbit-w)); scroll-snap-align: center; }
.fw-orbit-card { height: 100%; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); transition: border-color 480ms, box-shadow 480ms; }
.fw-orbit-top { display: flex; align-items: center; gap: 10px; }
.fw-orbit-name { font-family: var(--fw-font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.fw-orbit-line { margin: 6px 0 14px; min-height: 2.9em; font-size: 14px; line-height: 1.45; color: var(--fw-muted); }
.fw-orbit-win { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); background: var(--fw-page); overflow: hidden; }
.fw-orbit-win .fw-stage-head { padding: 9px 12px; }
.fw-orbit-rows { display: grid; gap: 6px; align-content: start; min-height: 232px; padding: 10px; }
.fw-orbit-rows .fw-srow { min-height: 48px; padding: 8px 10px; }
.fw-orbit-rows .fw-srow-a { font-size: 12.5px; }
.fw-orbit-rows .fw-srow-b { font-size: 12px; }
.fw-orbit-rows .fw-chip.is-lg { height: 24px; padding: 0 8px; font-size: 11.5px; }
.fw-orbit-rows .fw-smsg { gap: 5px; padding: 8px; }
.fw-orbit-rows .fw-smsg-q { font-size: 12.5px; }
.fw-orbit-rows .fw-smsg-r { padding: 5px 10px; font-size: 12.5px; }
.fw-orbit-rows .fw-sroute { padding: 10px; }
.fw-orbit-rows .fw-sroute-track { margin-top: 10px; }
.fw-orbit-cap { margin-top: auto; min-height: 3.4em; padding: 9px 12px; border-top: 1px solid var(--fw-line); font-size: 12.5px; line-height: 1.4; }
.fw-orbit-floor { display: none; }
.fw-orbit-bar { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.fw-orbit-now { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--fw-muted); }
.fw-orbit-now b { margin-right: 4px; font-weight: 600; color: var(--fw-text); }
.fw-orbit-count { margin-right: 4px; font-family: var(--fw-font-num); font-size: 12px; color: var(--fw-muted); white-space: nowrap; }
.fw-orbit-count b { font-weight: 500; color: var(--fw-text); }
.fw-orbit .fw-playbtn { display: none; }
.fw-orbit.is-ring .fw-playbtn { display: inline-flex; }
.fw-orbit-panel.is-front .fw-orbit-card { border-color: var(--fw-accent); box-shadow: 0 0 0 3px var(--fw-accent-wash), var(--fw-shadow); }

.fw-orbit.is-ring .fw-orbit-stage { height: calc(var(--fw-orbit-h) + 84px); perspective: 1600px; perspective-origin: 50% 18%; overflow: clip; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.fw-orbit.is-ring .fw-orbit-stage:focus-visible { outline-offset: -2px; }
.fw-orbit.is-ring .fw-orbit-stage.is-dragging { cursor: grabbing; }
.fw-orbit.is-ring .fw-orbit-ring { position: absolute; z-index: 1; left: 50%; top: 26px; display: block; width: var(--fw-orbit-w); height: var(--fw-orbit-h); margin: 0 0 0 calc(var(--fw-orbit-w) / -2); padding: 0; overflow: visible; transform-style: preserve-3d; transform: translateZ(calc(var(--fw-orbit-r, 500px) * -1)) rotateX(-4deg) rotateY(var(--fw-orbit-a, 0deg)); transition: transform 900ms var(--fw-ease-io); }
.fw-orbit.is-ring .fw-orbit-stage.is-dragging .fw-orbit-ring { transition: none; }
.fw-orbit.is-ring .fw-orbit-panel { position: absolute; inset: 0; transform: rotateY(calc(var(--i) * var(--fw-orbit-step, 36deg))) translateZ(var(--fw-orbit-r, 500px)); -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: calc(1 - var(--d, 0) * 1.5); transition: opacity 600ms var(--fw-ease-io); }
.fw-orbit.is-ring .fw-orbit-panel:not(.is-front) { cursor: pointer; }
.fw-orbit.is-ring .fw-orbit-floor { display: block; position: absolute; z-index: 0; left: 50%; bottom: 6px; width: min(94%, 1000px); height: 120px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--fw-accent-wash), transparent); pointer-events: none; }
:root[data-motion="still"] .fw-orbit-ring,
:root[data-motion="still"] .fw-orbit-panel,
:root[data-motion="still"] .fw-orbit-card { transition: none; }

/* ---------- Driver app in 3D (AppShowcase3D) ----------
   The phone is built from slabs: seven copies of its outline stacked through its thickness (--t)
   between the back and the glass, so a turn shows a solid side. blocks.js turns it (rotateX and
   rotateY on .fw-ph3d) and plays the screens: the one on screen is .is-on, the one leaving is
   .is-out, and each arrives with a slide, a blur clearing and a scan line, like a cut in a film. */
.fw-app3d-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "head fig" "side fig"; gap: 0 64px; align-items: start; }
.fw-app3d-head { grid-area: head; }
.fw-app3d-head .fw-lead { max-width: 560px; margin-top: 14px; }
.fw-app3d-fig { grid-area: fig; align-self: center; min-width: 0; margin: 0; }
.fw-app3d-side { grid-area: side; margin-top: 28px; }
.fw-app3d-list { list-style: none; border-top: 1px solid var(--fw-line); }
.fw-app3d-list li { border-bottom: 1px solid var(--fw-line); }
.fw-app3d-item { position: relative; display: grid; gap: 2px; width: 100%; padding: 12px 0 12px 18px; border: 0; background: transparent; color: var(--fw-muted); font: inherit; text-align: left; }
button.fw-app3d-item { cursor: pointer; }
button.fw-app3d-item:hover { color: var(--fw-text); }
.fw-app3d-item b { font-size: 15.5px; font-weight: 600; color: var(--fw-text); }
.fw-app3d-item span { font-size: 14px; line-height: 1.45; }
.fw-app3d-item::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; border-radius: 2px; background: var(--fw-line-2); transition: background 240ms; }
.fw-app3d-item[aria-current="true"] { color: var(--fw-text); }
.fw-app3d-item[aria-current="true"]::before { background: var(--fw-accent); }
.fw-app3d-cta { margin-top: 24px; }
.fw-app3d-stage { position: relative; height: 600px; display: grid; place-items: center; perspective: 1400px; }
.fw-ph3d { --w: 262px; --h: 540px; --t: 16px; --rad: 40px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-20deg); }
.fw-ph3d-edge, .fw-ph3d-back, .fw-ph3d-front { position: absolute; inset: 0; border-radius: var(--rad); }
.fw-ph3d-edge { background: var(--fw-scene-left); border: 1px solid var(--fw-line-2); transform: translateZ(calc((var(--k) - 3) * var(--t) / 7)); }
.fw-ph3d-back { background: var(--fw-scene-right); border: 1px solid var(--fw-line-2); transform: translateZ(calc(var(--t) / -2)) rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fw-ph3d-back span { position: absolute; left: 18px; top: 18px; width: 66px; height: 66px; border-radius: 20px; border: 1px solid var(--fw-line-2); background: var(--fw-scene-top); }
.fw-ph3d-key { position: absolute; right: -3px; width: 4px; border-radius: 2px; background: var(--fw-scene-top); border: 1px solid var(--fw-line-2); }
.fw-ph3d-key.is-power { top: 120px; height: 58px; }
.fw-ph3d-key.is-volume { top: 196px; height: 86px; }
.fw-ph3d-front { padding: 10px; background: var(--fw-sunken); border: 1px solid var(--fw-line-2); box-shadow: var(--fw-shadow); transform: translateZ(calc(var(--t) / 2)); }
.fw-ph3d-screen { position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: calc(var(--rad) - 10px); background: var(--fw-page); color: var(--fw-text); font-size: 12px; }
.fw-ph3d-screen > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fw-ph3d-bars { position: absolute; left: 16px; right: 16px; top: 9px; z-index: 2; display: flex; gap: 3px; }
.fw-ph3d-bars i { flex: 1; height: 3px; border-radius: 2px; background: var(--fw-line-2); overflow: hidden; }
.fw-ph3d-bars b { display: block; width: 0; height: 100%; background: var(--fw-accent); }
.fw-ph3d-bars i.is-done b { width: 100%; }
.fw-ph3d-shot { position: absolute; inset: 14px 0 0; display: flex; flex-direction: column; gap: 0; opacity: 0; visibility: hidden; transform: translateX(16%) scale(.96); filter: blur(6px); transition: opacity 520ms var(--fw-ease), transform 640ms var(--fw-ease), filter 520ms, visibility 0s 640ms; }
.fw-ph3d-shot.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity 520ms var(--fw-ease), transform 640ms var(--fw-ease), filter 520ms, visibility 0s; }
.fw-ph3d-shot.is-out { transform: translateX(-12%) scale(.96); }
.fw-ph3d-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 26%; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, var(--fw-accent-wash) 75%, color-mix(in srgb, var(--fw-accent) 45%, transparent)); }
.fw-ph3d-scan.is-run { animation: fw-ph3d-scan 760ms var(--fw-ease-io) both; }
.fw-ph3d-pool { position: absolute; left: 50%; bottom: 0; width: 320px; height: 64px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--fw-accent-wash), transparent); pointer-events: none; }
@keyframes fw-ph3d-scan { from { transform: translateY(-100%); opacity: 1; } to { transform: translateY(400%); opacity: 0; } }
@media (min-width: 1100px) {
    .fw-app3d-stage { height: 650px; }
    .fw-ph3d { scale: 1.1; }
}
@media (max-width: 899px) {
    .fw-app3d-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "side"; }
    .fw-app3d-fig { margin-top: 24px; }
    .fw-app3d-stage { height: 580px; }
}
@media (max-width: 419px) {
    .fw-app3d-stage { height: 520px; }
    .fw-ph3d { scale: .88; }
}

/* The driver app's drawn screens (Blocks/_PhoneMock: myday to alerts). */
.fw-ph3d .fw-pcheck.is-fail .fw-pcheck-photo { justify-content: center; align-items: center; }
.fw-pm-card { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--fw-line); border-radius: 10px; background: var(--fw-raised); }
.fw-pm-card small { font-size: 11px; color: var(--fw-muted); }
.fw-pm-card small.fw-mono { color: var(--fw-text); }
.fw-pm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fw-pm-headrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fw-pm-label { margin-top: 4px; font-family: var(--fw-font-num); font-size: 10.5px; letter-spacing: .04em; color: var(--fw-muted); }
.fw-pm-route { list-style: none; display: grid; gap: 7px; padding-left: 12px; border-left: 2px solid var(--fw-accent); }
.fw-pm-route small { display: block; font-size: 10.5px; color: var(--fw-muted); }
.fw-pm-route b { font-size: 14px; font-weight: 600; }
.fw-pm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fw-pm-btn { position: relative; overflow: hidden; height: 36px; display: grid; place-items: center; border: 1px solid var(--fw-line-2); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--fw-text); }
.fw-pm-btn.is-go { background: var(--fw-btn-bg); color: var(--fw-btn-ink); border-color: var(--fw-btn-border); }
.fw-pm-tap { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; }
.fw-pm-done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 2px; }
.fw-pm-done small, .fw-pm-note { font-size: 10.5px; line-height: 1.4; color: var(--fw-muted); }
.fw-pm-notif { display: grid; gap: 8px; margin: 4px 8px 4px; padding: 10px; border: 1px solid var(--fw-line-2); border-radius: 12px; background: var(--fw-surface); box-shadow: var(--fw-shadow); }
.fw-pm-notif-top { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.fw-pm-notif-top i { width: 14px; height: 14px; border-radius: 4px; background: var(--fw-accent); }
.fw-pm-notif-top b { font-weight: 600; }
.fw-pm-notif-top small { margin-left: auto; font-size: 10.5px; color: var(--fw-muted); }
.fw-pm-notif p { font-size: 12.5px; line-height: 1.35; }
.fw-pm-stages { list-style: none; display: grid; padding: 0 16px; }
.fw-pm-stages li { position: relative; padding: 0 0 12px 20px; font-size: 12px; color: var(--fw-muted); }
.fw-pm-stages li::before { content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border: 2px solid var(--fw-line-2); border-radius: 50%; background: var(--fw-page); }
.fw-pm-stages li::after { content: ""; position: absolute; left: 4.5px; top: 16px; bottom: 1px; width: 2px; background: var(--fw-line); }
.fw-pm-stages li:last-child::after { display: none; }
.fw-pm-stages li.is-done { font-weight: 600; color: var(--fw-text); }
.fw-pm-stages li.is-done::before { border-color: var(--fw-ok-ink); background: var(--fw-ok-ink); }
.fw-pm-stages li.is-next { color: var(--fw-text); }
.fw-pm-stages li.is-next::before { border-color: var(--fw-accent); }
.fw-pm-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fw-pm-photos span { aspect-ratio: 1.15; display: grid; place-items: center; border: 1px solid var(--fw-line); border-radius: 8px; background: repeating-linear-gradient(135deg, var(--fw-surface) 0 6px, var(--fw-raised) 6px 12px); font-size: 10.5px; color: var(--fw-muted); }
.fw-pm-photos span.is-add { border: 1px dashed var(--fw-line-2); background: transparent; }
.fw-pm-alert { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--fw-due-ink); border-radius: 10px; background: var(--fw-due-wash); }
.fw-pm-alert b { font-size: 13px; font-weight: 600; }
.fw-pm-alert small { font-size: 11px; line-height: 1.35; }
.fw-pm-gauge { height: 8px; overflow: hidden; border-radius: 4px; background: var(--fw-line); }
.fw-pm-gauge i { display: block; width: 12%; height: 100%; border-radius: 4px; background: var(--fw-due); }
.fw-pm-station { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--fw-line); border-radius: 8px; }
.fw-pm-station b { display: block; font-size: 12.5px; font-weight: 600; }
.fw-pm-station small { font-size: 10.5px; color: var(--fw-muted); }
.fw-pm-station > span { font-family: var(--fw-font-num); font-size: 12.5px; color: var(--fw-ok-ink); }
.fw-pm-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 10px 8px; padding: 3px; border: 1px solid var(--fw-line); border-radius: 9px; background: var(--fw-raised); }
.fw-pm-tabs span { height: 26px; display: grid; place-items: center; border-radius: 6px; font-size: 11.5px; color: var(--fw-muted); }
.fw-pm-tabs span.is-on { background: var(--fw-page); box-shadow: inset 0 0 0 1px var(--fw-line-2); font-weight: 600; color: var(--fw-text); }
.fw-pm-veh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--fw-line); border-radius: 8px; }
.fw-pm-veh small { font-size: 11px; color: var(--fw-muted); }
.fw-pm-veh.is-pick { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-pm-veh.is-pick small { color: var(--fw-text); }
.fw-pm-alertrow { position: relative; display: grid; gap: 1px; padding: 8px 10px 8px 22px; border: 1px solid var(--fw-line); border-radius: 8px; }
.fw-pm-alertrow::before { content: ""; position: absolute; left: 9px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--fw-line-2); }
.fw-pm-alertrow.is-unread { background: var(--fw-raised); }
.fw-pm-alertrow.is-unread::before { background: var(--fw-accent); }
.fw-pm-alertrow b { font-size: 12.5px; font-weight: 600; }
.fw-pm-alertrow small { font-size: 11px; line-height: 1.35; color: var(--fw-muted); }

/* Each part arrives in turn when its screen comes on; the final look is the parts' own style, so
   with motion paused (data-motion="still") every screen simply shows how it ends. */
@keyframes fw-pm-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fw-pm-drop { from { opacity: 0; transform: translateY(-130%); } }
@keyframes fw-pm-tap { 0% { opacity: .45; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes fw-pm-drain { from { width: 46%; } }
@keyframes fw-pm-pick { from { border-color: var(--fw-line); background: transparent; } }
.fw-ph3d-shot.is-on .fw-pm-k { animation: fw-pm-in 460ms var(--fw-ease) calc(var(--k, 0) * 150ms + 260ms) both; }
.fw-ph3d-shot.is-on .fw-pm-veh.is-pick { animation: fw-pm-in 460ms var(--fw-ease) calc(var(--k, 0) * 150ms + 260ms) both, fw-pm-pick 420ms ease 1300ms both; }
.fw-ph3d-shot.is-on .fw-pm-drop { animation: fw-pm-drop 560ms var(--fw-ease) 300ms both; }
.fw-ph3d-shot.is-on .fw-pm-tap { animation: fw-pm-tap 650ms ease-out var(--at, 1500ms); }
.fw-ph3d-shot.is-on .fw-pm-gauge i { animation: fw-pm-drain 1400ms var(--fw-ease-io) 400ms both; }
:root[data-motion="still"] .fw-ph3d-shot,
:root[data-motion="still"] .fw-ph3d-shot * { animation: none !important; transition: none !important; }
:root[data-motion="still"] .fw-ph3d-scan { display: none; }

/* ---------- Feature grid (+ examiner side panel) ---------- */

.fw-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px 24px; }
.fw-features.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fw-features h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.fw-features p { font-size: 14.5px; color: var(--fw-muted); }
.fw-features-copy .fw-lead { margin: 16px 0 28px; }
.fw-side { border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); overflow: hidden; }
.fw-side-head { padding: 16px 18px; border-bottom: 1px solid var(--fw-line); display: flex; align-items: center; gap: 10px; font-weight: 600; }
.fw-side-list { list-style: none; padding: 8px 18px 14px; }
.fw-side-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--fw-line); font-size: 14.5px; }
.fw-side-list li span:last-child { font-family: var(--fw-font-num); font-size: 12px; color: var(--fw-muted); text-align: right; flex: none; }
.fw-side-link { padding: 0 18px 18px; font-weight: 600; font-size: 14.5px; }

/* ---------- Stat band ---------- */

.fw-stats { border-top: 1px solid var(--fw-line); border-bottom: 1px solid var(--fw-line); background: var(--fw-accent-wash); }
.fw-stats-grid { max-width: 1192px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fw-stat { padding: 32px 24px 32px 0; }
.fw-stat-value { font-family: var(--fw-font-num); font-size: clamp(36px, 4vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.fw-stat-label { margin-top: 8px; font-size: 15px; }

/* ---------- Pricing calculator and plan cards ---------- */

.fw-calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.fw-card { padding: 24px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); }
.fw-calc-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.fw-calc-label span { font-family: var(--fw-font-num); font-size: 28px; font-weight: 500; }
.fw-range { width: 100%; height: 44px; }
.fw-range-ticks { display: flex; justify-content: space-between; font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-muted); margin-top: -8px; }
.fw-calc-q { font-weight: 600; margin: 22px 0 10px; }
.fw-needs { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-need { min-height: 44px; padding: 8px 14px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: transparent; color: var(--fw-text); font: 500 14px var(--fw-font-body); cursor: pointer; text-align: left; }
.fw-need[aria-pressed="true"] { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-rec { padding: 24px; border: 1px solid var(--fw-accent); box-shadow: 0 0 0 3px var(--fw-accent-wash); border-radius: var(--fw-radius-lg); background: var(--fw-raised); display: flex; flex-direction: column; }
.fw-rec-tag { font-family: var(--fw-font-num); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fw-accent-ink); }
.fw-rec-name { font-family: var(--fw-font-display); font-size: 28px; font-weight: 600; margin-top: 6px; }
.fw-rec-adds { font-size: 14.5px; color: var(--fw-muted); margin-top: 4px; }
.fw-rec-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 22px; }
.fw-rec-total b { font-family: var(--fw-font-num); font-size: 44px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.fw-rec-total span { font-size: 14px; color: var(--fw-muted); }
.fw-rec-vat { font-family: var(--fw-font-num); font-size: 13px; color: var(--fw-muted); margin-top: 8px; }
.fw-rec-calc { font-family: var(--fw-font-num); font-size: 13px; margin-top: 10px; }
.fw-rec-note { font-size: 13px; color: var(--fw-due-ink); margin-top: 8px; }
.fw-rec-note[hidden] { display: none; }
.fw-rec-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 22px; }
.fw-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 16px; }
.fw-plan { padding: 18px; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line); transition: all 240ms; display: flex; flex-direction: column; }
.fw-plan.is-quote { border-style: dashed; border-color: var(--fw-line-2); }
/* The calculator's cards are choices (buttons in a radio group). */
.fw-plan.is-pick { font: inherit; color: var(--fw-text); background: transparent; text-align: left; cursor: pointer; }
.fw-plan.is-pick:hover { border-color: var(--fw-line-2); }
.fw-plan.is-pick[aria-checked="true"] { border-style: solid; border-color: var(--fw-accent); background: var(--fw-accent-wash); box-shadow: 0 0 0 3px var(--fw-accent-wash); }
.fw-plan.is-pick .fw-plan-top b { display: inline-flex; align-items: center; gap: 10px; }
.fw-plan.is-pick .fw-radio { width: 18px; height: 18px; }
.fw-plan.is-pick[aria-checked="true"] .fw-radio { border: 5px solid var(--fw-accent); }
.fw-plan.is-pick .fw-plan-price, .fw-plan.is-pick .fw-plan-adds { display: block; }
.fw-plan.is-pick .fw-plan-adds { margin-bottom: 12px; }
.fw-plan.is-pick .fw-plan-badge { align-self: flex-start; margin-top: auto; }
.fw-plan.is-highlight { border-color: var(--fw-accent); }
.fw-plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fw-plan-top b { font-weight: 600; }
.fw-plan-top span { font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-muted); }
.fw-plan-price { font-family: var(--fw-font-num); font-size: 22px; margin-top: 6px; }
.fw-plan-price small { font-family: var(--fw-font-body); font-size: 12.5px; color: var(--fw-muted); }
.fw-plan-adds { font-size: 13.5px; color: var(--fw-muted); margin-top: 6px; }
.fw-plan-feats { list-style: none; display: grid; gap: 7px; margin: 14px 0 0; font-size: 13px; }
.fw-plan-feats li { display: flex; gap: 8px; }
.fw-plan-feats li::before { content: "\2713"; color: var(--fw-accent); }
.fw-plan .fw-btn { margin-top: 16px; }
.fw-plan-badge { font-family: var(--fw-font-num); font-size: 10.5px; padding: 2px 7px; border-radius: var(--fw-radius); background: var(--fw-accent-wash); color: var(--fw-accent-ink); }

/* ---------- Plan matrix ---------- */

.fw-matrix-wrap { overflow-x: auto; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); }
.fw-matrix { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.fw-matrix th, .fw-matrix td { padding: 12px 14px; border-bottom: 1px solid var(--fw-line); text-align: left; }
.fw-matrix thead th { position: sticky; top: 65px; background: var(--fw-raised); font-weight: 600; z-index: 1; }
.fw-matrix td.is-c, .fw-matrix th.is-c { text-align: center; }
.fw-matrix .yes { color: var(--fw-ok-ink); font-weight: 700; }
.fw-matrix .no { color: var(--fw-muted); }
.fw-matrix small { display: block; color: var(--fw-muted); font-size: 12.5px; }

/* ---------- Connected services ---------- */

.fw-svc-head { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.fw-svc-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fw-svc-list li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); font-family: var(--fw-font-num); font-size: 13px; background: var(--fw-page); }
.fw-svc-list img { height: 20px; }
.fw-svc-later { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.fw-svc-later > span:first-child { font-size: 13px; color: var(--fw-muted); margin-right: 4px; }
.fw-svc-soon { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px dashed var(--fw-line-2); border-radius: var(--fw-radius); font-family: var(--fw-font-num); font-size: 12.5px; color: var(--fw-muted); }

/* ---------- FAQ ---------- */

.fw-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; }
@media (min-width: 900px) { .fw-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.fw-faq-intro p { font-size: 16px; color: var(--fw-muted); margin: 14px 0 0; }
.fw-faq-list { min-width: 0; border-top: 1px solid var(--fw-line); }
.fw-faq-item { border-bottom: 1px solid var(--fw-line); }
.fw-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; border: 0; background: transparent; color: var(--fw-text); font: 600 16.5px var(--fw-font-body); text-align: left; cursor: pointer; }
.fw-faq-q svg { fill: none; stroke: var(--fw-accent); stroke-width: 1.8; stroke-linecap: round; flex: none; transition: transform 240ms; }
.fw-faq-q[aria-expanded="true"] svg { transform: rotate(45deg); }
.fw-faq-a { margin: 0 0 18px; max-width: 680px; color: var(--fw-muted); font-size: 15.5px; text-wrap: pretty; }
.fw-faq-a[hidden] { display: none; }
/* Questions under topics (an item's "group"): the topics as links beside the list, which stay in
   view on a wide screen while the list scrolls. */
.fw-faq.is-grouped .fw-faq-list { border-top: 0; }
.fw-faq-topic { margin: 36px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--fw-line); font-family: var(--fw-font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; scroll-margin-top: 96px; }
.fw-faq-list > .fw-faq-topic:first-child { margin-top: 0; }
.fw-faq-topics { margin-top: 24px; }
.fw-faq-topics ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fw-faq-topics a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); color: var(--fw-text); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: border-color 240ms; }
.fw-faq-topics a:hover { border-color: var(--fw-accent); color: var(--fw-text); }
.fw-faq-topics span { font-family: var(--fw-font-num); font-size: 12px; color: var(--fw-muted); }
@media (min-width: 900px) {
    .fw-faq.is-grouped .fw-faq-intro { position: sticky; top: 96px; align-self: start; }
    .fw-faq-topics ul { display: grid; gap: 6px; max-width: 320px; }
}

/* ---------- Testimonial, logos ---------- */

.fw-quote { max-width: 820px; margin: 0 auto; text-align: center; }
.fw-quote blockquote { margin: 0; font-family: var(--fw-font-display); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.fw-quote figcaption { margin-top: 18px; color: var(--fw-muted); font-size: 15px; }
.fw-quote figcaption b { color: var(--fw-text); font-weight: 600; }
.fw-logos { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; justify-content: center; }
.fw-logos img { height: 34px; max-width: 160px; object-fit: contain; opacity: .8; }
.fw-logos span { font-family: var(--fw-font-display); font-weight: 600; font-size: 18px; color: var(--fw-muted); }

/* ---------- Rich text and legal pages ---------- */

.fw-prose { max-width: 760px; margin: 0 auto; font-size: 16.5px; line-height: 1.7; }
.fw-prose.is-centre { text-align: center; }
.fw-prose > * + * { margin-top: 1em; }
.fw-prose h1 { font-family: var(--fw-font-display); font-size: var(--fw-h1); line-height: 1.05; letter-spacing: -.025em; font-weight: 600; }
.fw-prose h2 { font-family: var(--fw-font-display); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.015em; font-weight: 600; margin-top: 1.6em; }
.fw-prose h3 { font-size: 18px; font-weight: 600; margin-top: 1.4em; }
.fw-prose ul, .fw-prose ol { padding-left: 1.3em; }
.fw-prose li + li { margin-top: .35em; }
.fw-prose p, .fw-prose li { color: var(--fw-text); }
.fw-prose blockquote { margin-left: 0; padding-left: 16px; border-left: 3px solid var(--fw-accent); color: var(--fw-muted); }
.fw-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; display: block; overflow-x: auto; }
.fw-prose th, .fw-prose td { padding: 10px 12px; border-bottom: 1px solid var(--fw-line); text-align: left; vertical-align: top; }
.fw-prose th { font-weight: 600; background: var(--fw-raised); }
.fw-prose code { font-family: var(--fw-font-num); font-size: .9em; background: var(--fw-raised); padding: 1px 5px; border-radius: 4px; }
.fw-prose img { border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line); }
.fw-page-head { padding: 56px 0 8px; }

/* ---------- Image and text, video, gallery, steps, tabs, comparison ---------- */

.fw-imgtext { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: center; }
.fw-imgtext.is-left .fw-imgtext-media { order: -1; }
.fw-imgtext-media img { width: 100%; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); box-shadow: var(--fw-shadow); }
.fw-imgtext .fw-lead { margin-top: 16px; }
.fw-video { margin: 0; }
.fw-video video, .fw-video img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.fw-video.is-phone { max-width: 300px; margin: 0 auto; }
.fw-video.is-phone .fw-phone-screen video, .fw-video.is-phone .fw-phone-screen img { aspect-ratio: auto; height: 100%; }
.fw-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fw-gallery.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fw-gallery a { display: block; border-radius: var(--fw-radius-lg); overflow: hidden; border: 1px solid var(--fw-line); aspect-ratio: 16 / 10; }
.fw-gallery img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 320ms var(--fw-ease); }
.fw-gallery a:hover img { transform: scale(1.03); }
.fw-lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(5, 8, 12, .92); display: grid; place-items: center; padding: 24px; }
.fw-lightbox[hidden] { display: none; }
.fw-lightbox img { max-height: 82vh; border-radius: var(--fw-radius-lg); }
.fw-lightbox p { color: #E9EDF3; text-align: center; margin-top: 12px; font-size: 14px; }
.fw-lightbox button { position: absolute; top: 16px; right: 16px; }
.fw-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; counter-reset: step; }
.fw-steps li { padding: 22px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); position: relative; }
.fw-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--fw-font-num); font-size: 26px; color: var(--fw-accent-ink); line-height: 1; margin-bottom: 12px; }
.fw-steps h3 { font-size: 17px; font-weight: 600; }
.fw-steps p { margin-top: 6px; font-size: 14.5px; color: var(--fw-muted); }

/* THE SETUP GUIDE (6 Oct 2026, Blocks/_SetupGuide): a contents list that stays beside the steps on a
   wide screen, then one card per step -- number, name, where it is in the CRM, words, a checklist,
   a picture and a tip. Theme tokens only, so every site theme and dark mode follow. */
.fw-guide-head { margin-bottom: 28px; }
.fw-guide-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.fw-guide-toc { position: sticky; top: 92px; padding: 18px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); max-height: calc(100vh - 120px); overflow: auto; }
.fw-guide-toc-title { font: 600 12px var(--fw-font-num); letter-spacing: .08em; text-transform: uppercase; color: var(--fw-muted); margin-bottom: 10px; }
.fw-guide-toc ol { list-style: none; display: grid; gap: 2px; }
.fw-guide-toc a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--fw-radius); color: var(--fw-text); font-size: 14px; text-decoration: none; line-height: 1.3; }
.fw-guide-toc a:hover, .fw-guide-toc a:focus-visible { background: var(--fw-accent-wash); }
.fw-guide-toc a span { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--fw-font-num); background: var(--fw-surface); color: var(--fw-accent-ink); }
.fw-guide-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fw-line); font-size: 13.5px; color: var(--fw-muted); }
.fw-guide-steps { display: grid; gap: 24px; }
.fw-guide-step { padding: 28px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); scroll-margin-top: 96px; }
.fw-guide-step-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.fw-guide-num { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font: 700 20px var(--fw-font-num); background: var(--fw-btn-bg); color: var(--fw-btn-ink); }
.fw-guide-count { font: 600 12px var(--fw-font-num); letter-spacing: .08em; text-transform: uppercase; color: var(--fw-accent-ink); }
.fw-guide-step h3 { font: 600 22px var(--fw-font-display); color: var(--fw-text); margin-top: 2px; }
.fw-guide-where { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--fw-accent-wash); color: var(--fw-text); font-size: 13px; font-weight: 600; }
.fw-guide-where svg { color: var(--fw-accent-ink); }
.fw-guide-step > p { font-size: 16px; color: var(--fw-muted); margin-top: 10px; max-width: 760px; }
.fw-guide-points { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.fw-guide-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--fw-text); }
.fw-guide-points li svg { flex: 0 0 auto; margin-top: 3px; color: var(--fw-ok-ink); }
.fw-guide-figure { margin: 20px 0 0; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); overflow: hidden; background: var(--fw-sunken); }
.fw-guide-figure img { display: block; width: 100%; height: auto; }
.fw-guide-figure figcaption { padding: 10px 14px; font-size: 13px; color: var(--fw-muted); border-top: 1px solid var(--fw-line); }
.fw-guide-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--fw-radius); background: var(--fw-due-wash); color: var(--fw-text); font-size: 14.5px; }
.fw-guide-tip strong { flex: 0 0 auto; color: var(--fw-due-ink); font-family: var(--fw-font-num); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; padding-top: 2px; }
.fw-guide-top { display: inline-block; margin-top: 16px; font-size: 13.5px; color: var(--fw-muted); }
@media (max-width: 959px) {
    .fw-guide-layout { grid-template-columns: 1fr; }
    .fw-guide-toc { position: static; max-height: none; }
    .fw-guide-toc ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}
@media (max-width: 575px) {
    .fw-guide-step { padding: 18px; }
    .fw-guide-num { width: 40px; height: 40px; font-size: 17px; }
    .fw-guide-step h3 { font-size: 19px; }
}
.fw-tabs-bar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--fw-line); margin-bottom: 20px; }
.fw-tabs-bar button { height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--fw-muted); font: 600 15px var(--fw-font-body); cursor: pointer; border-bottom: 2px solid transparent; }
.fw-tabs-bar button[aria-selected="true"] { color: var(--fw-text); border-bottom-color: var(--fw-accent); }
.fw-tab-panel { font-size: 16px; color: var(--fw-muted); max-width: 760px; }
.fw-tab-panel[hidden] { display: none; }
.fw-tab-panel h3 { color: var(--fw-text); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.fw-tabs-acc { display: none; }
@media (max-width: 719px) {
    .fw-tabs.is-responsive .fw-tabs-bar, .fw-tabs.is-responsive .fw-tab-panels { display: none; }
    .fw-tabs.is-responsive .fw-tabs-acc { display: block; }
}
.fw-compare-wrap { overflow-x: auto; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); }
.fw-compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.fw-compare th, .fw-compare td { padding: 14px 16px; border-bottom: 1px solid var(--fw-line); text-align: left; vertical-align: top; }
.fw-compare thead th { background: var(--fw-raised); font-weight: 600; }
.fw-compare td:nth-child(2) { color: var(--fw-muted); }
.fw-compare td:first-child { font-weight: 600; }

/* ---------- Vehicle check, compliance check, product tour, download ---------- */

.fw-tool-card { border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); padding: clamp(20px, 3vw, 32px); box-shadow: var(--fw-shadow); }
.fw-vc-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.fw-vc-plate { flex: 1; min-width: 200px; height: 56px; padding: 0 16px; border-radius: 6px; border: 2px solid rgba(0, 0, 0, .45); background: #F7D117; color: #111; font: 700 26px var(--fw-font-num); letter-spacing: .1em; text-transform: uppercase; }
.fw-vc-result { margin-top: 18px; display: grid; gap: 8px; }
.fw-vc-result[hidden] { display: none; }
.fw-hc-progress { height: 4px; border-radius: 2px; background: var(--fw-line); margin: 10px 0 18px; }
.fw-hc-progress i { display: block; height: 4px; border-radius: 2px; background: var(--fw-accent); transition: width 240ms; }
.fw-hc-meta { display: flex; justify-content: space-between; font-family: var(--fw-font-num); font-size: 12px; color: var(--fw-muted); }
.fw-hc-q { font-family: var(--fw-font-display); font-size: 21px; font-weight: 600; line-height: 1.25; min-height: 54px; }
.fw-hc-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.fw-hc-result { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 480px) { .fw-hc-result { grid-template-columns: 1fr; } }
.fw-hc-ring circle { fill: none; stroke-width: 9; }
.fw-hc-ring .track { stroke: var(--fw-line); }
.fw-hc-ring .value { stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray 480ms; }
.fw-hc-ring text { text-anchor: middle; fill: var(--fw-text); font: 500 24px var(--fw-font-num); }
.fw-hc-gaps { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14px; }
.fw-tour { position: relative; aspect-ratio: 16 / 10; border-radius: var(--fw-radius-lg); overflow: hidden; border: 1px solid var(--fw-line-2); background: #0E141D; box-shadow: var(--fw-shadow); }
.fw-tour > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.fw-tour-mock { position: absolute; inset: 0; display: grid; grid-template-columns: 15% 1fr; pointer-events: none; }
.fw-tour-mock-side { background: #111823; border-right: 1px solid rgba(255, 255, 255, .08); padding: 10% 12%; display: grid; gap: 7%; align-content: start; }
.fw-tour-mock-side span { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.fw-tour-mock-side span:first-child { height: 8px; width: 60%; background: var(--fw-accent); }
.fw-tour-mock-main { padding: 3%; display: grid; grid-template-rows: auto 1fr; gap: 4%; }
.fw-tour-mock-main > span { height: 14%; min-height: 18px; border-radius: 4px; background: rgba(255, 107, 44, .14); border: 1px dashed rgba(255, 107, 44, .6); }
.fw-tour-mock-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3%; }
.fw-tour-mock-cols div { display: grid; gap: 6%; align-content: start; }
.fw-tour-mock-cols i { height: 34px; border-radius: 4px; background: #182130; }
.fw-tour-mock-cols i:first-child { height: 6px; width: 50%; background: rgba(255, 255, 255, .3); }
.fw-hot { position: absolute; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: var(--fw-accent); color: #fff; font: 600 13px var(--fw-font-num); cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); z-index: 2; }
.fw-hot[aria-pressed="true"] { border-width: 3px; box-shadow: 0 0 0 5px var(--fw-accent-wash), 0 4px 10px rgba(0, 0, 0, .3); animation: fw-pulse 1.8s infinite; }
@keyframes fw-pulse { 50% { box-shadow: 0 0 0 9px transparent, 0 4px 10px rgba(0, 0, 0, .3); } }
:root[data-motion="still"] .fw-hot[aria-pressed="true"] { animation: none; }
.fw-tour-pop { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); }
.fw-tour-pop b { display: block; font-weight: 600; }
.fw-tour-pop p { font-size: 14.5px; color: var(--fw-muted); margin-top: 4px; }
.fw-tour-pop small { font-family: var(--fw-font-num); color: var(--fw-muted); font-size: 12px; }
.fw-download { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; align-items: center; }

/* ---------- Module gallery (reads the module list) ---------- */

.fw-mgallery { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.fw-mgroup { flex: 1 1 260px; max-width: 360px; padding: 20px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); display: grid; gap: 10px; text-decoration: none; color: var(--fw-text); transition: border-color 240ms, transform 320ms var(--fw-ease); }
.fw-mgroup:hover { border-color: var(--fw-accent); color: var(--fw-text); transform: translateY(-3px); }
.fw-mgroup b { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.fw-mgroup span { font-size: 14px; color: var(--fw-muted); }

/* ---------- Reveal on scroll ---------- */

@keyframes fw-reveal { from { opacity: .35; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.fw-revealing { animation: fw-reveal 480ms var(--fw-ease) both; }

/* =============================================================================
   Fixed-layout pages
   ============================================================================= */

/* ---------- 3D stages (shared) ---------- */

.fw-stage3d { position: relative; perspective: 1200px; }
.fw-stage3d-inner { transform-style: preserve-3d; }

/* ---------- About ---------- */

.fw-about-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--fw-line); background: radial-gradient(ellipse 60% 70% at 78% 30%, var(--fw-accent-wash), transparent 70%); }
.fw-about-hero .fw-wrap { padding-top: 64px; padding-bottom: var(--fw-pad-y); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
.fw-about-hero .fw-eyebrow { margin-bottom: 18px; }
.fw-about-stage { position: relative; aspect-ratio: 1 / .86; perspective: 1200px; }
.fw-about-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-14deg); }
.fw-grid-floor { position: absolute; left: 4%; right: 4%; top: 14%; bottom: 4%; transform: translateZ(-70px) rotateX(58deg); transform-origin: 50% 100%; border-radius: 18px; background: repeating-linear-gradient(0deg, transparent 0 31px, var(--fw-line) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, var(--fw-line) 31px 32px); border: 1px solid var(--fw-line-2); }
.fw-about-crm { position: absolute; left: 2%; top: 10%; width: 74%; transform: translateZ(0); border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); background: var(--fw-raised); box-shadow: var(--fw-shadow); overflow: hidden; }
.fw-about-crm-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--fw-line); background: var(--fw-surface); }
.fw-about-crm-head i { width: 8px; height: 8px; border-radius: 2px; background: var(--fw-accent); }
.fw-about-crm-head b { font-size: 12.5px; font-weight: 600; }
.fw-about-crm-head span { margin-left: auto; font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-muted); }
.fw-about-crm video, .fw-about-crm img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fw-feed { padding: 12px; display: grid; gap: 7px; }
.fw-feed div { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line); background: var(--fw-page); transition: background 480ms; }
.fw-feed div:first-child { background: var(--fw-accent-wash); }
.fw-feed i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fw-feed span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.fw-feed em { font-style: normal; font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-muted); }
.fw-about-phone { position: absolute; right: 2%; bottom: 6%; width: 34%; aspect-ratio: 9 / 17; transform: translateZ(90px); border-radius: 22px; border: 1px solid var(--fw-line-2); background: var(--fw-sunken); padding: 6px; box-shadow: var(--fw-shadow); }
.fw-about-phone-screen { height: 100%; border-radius: 17px; background: var(--fw-page); overflow: hidden; padding: 10px; display: grid; gap: 6px; align-content: start; font-size: 10.5px; }
.fw-about-phone-screen > b { font-family: var(--fw-font-display); font-weight: 600; font-size: 13px; }
.fw-about-job { padding: 7px; border-radius: 8px; border: 1px solid var(--fw-line); }
.fw-about-job.is-next { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-about-job small { display: block; font-family: var(--fw-font-num); font-size: 9.5px; color: var(--fw-muted); }
.fw-about-job.is-next small { color: var(--fw-text); }
.fw-about-job b { font-weight: 600; }
.fw-about-pbtn { margin-top: 4px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-weight: 600; background: var(--fw-btn-bg); color: var(--fw-btn-ink); transition: all 480ms; }
.fw-about-pbtn.is-done { background: var(--fw-ok-wash); color: var(--fw-ok-ink); }
.fw-float-chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: var(--fw-raised); box-shadow: var(--fw-shadow); font-size: 13px; white-space: nowrap; }
.fw-float-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--fw-ok-ink); flex: none; }
.fw-float-chip b { font-weight: 600; }
.fw-float-chip.is-accent { border-color: var(--fw-accent); box-shadow: 0 0 0 4px var(--fw-accent-wash), var(--fw-shadow); font-weight: 600; }
.fw-about-chip { left: -2%; top: 2%; transform: translateZ(150px); }
.fw-story h2 { margin: 0 0 18px; }
.fw-story p { font-size: 17px; color: var(--fw-muted); margin: 0 0 14px; text-wrap: pretty; }
.fw-story-img { width: 100%; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); box-shadow: var(--fw-shadow); }
.fw-fold { position: relative; height: 360px; perspective: 1000px; }
.fw-fold-tool { position: absolute; left: 6%; right: 6%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--fw-radius-lg); border: 1px dashed var(--fw-line-2); background: var(--fw-raised); transition: all 700ms var(--fw-ease-io); }
.fw-fold-tool b { font-weight: 600; font-size: 14px; }
.fw-fold-tool em { margin-left: auto; font-style: normal; font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-fold-one { position: absolute; left: 4%; right: 4%; top: 40%; display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-accent); background: var(--fw-raised); box-shadow: 0 0 0 4px var(--fw-accent-wash), var(--fw-shadow); transform: translateZ(0) rotateX(10deg) scale(.8); opacity: 0; transition: all 700ms var(--fw-ease) 300ms; }
.fw-fold-one i { width: 10px; height: 10px; border-radius: 3px; background: var(--fw-accent); }
.fw-fold-one b { font-weight: 600; }
.fw-fold-one em { margin-left: auto; font-style: normal; font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-accent-ink); }
.fw-fold.is-merged .fw-fold-one { transform: translateZ(40px) rotateX(10deg) scale(1); opacity: 1; }
.fw-principles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); gap: 14px; perspective: 1000px; margin-top: 28px; }
.fw-principle { padding: 24px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-page); display: flex; flex-direction: column; gap: 12px; transition: transform 320ms var(--fw-ease), box-shadow 320ms, border-color 320ms; transform-style: preserve-3d; }
.fw-principle:hover { transform: rotateX(6deg) rotateY(-6deg) translateY(-6px); box-shadow: var(--fw-shadow); border-color: var(--fw-accent); }
.fw-principle > span { font-family: var(--fw-font-num); font-size: 30px; font-weight: 500; line-height: 1; color: var(--fw-accent-ink); }
.fw-principle h3 { font-size: 17px; font-weight: 600; }
.fw-principle p { font-size: 14.5px; color: var(--fw-muted); text-wrap: pretty; }
.fw-film-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px 48px; align-items: end; margin-bottom: 28px; }
.fw-film-stage { perspective: 1600px; }
.fw-film-inner { transform-style: preserve-3d; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); background: var(--fw-raised); box-shadow: var(--fw-shadow); overflow: hidden; }
.fw-film-inner video, .fw-film-inner img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.fw-film-anim { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 30% 20%, var(--fw-accent-wash), transparent 60%), var(--fw-sunken); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4%; padding: 5%; align-items: center; }
.fw-film-where { font-family: var(--fw-font-num); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fw-accent-ink); }
.fw-film-time { font-family: var(--fw-font-num); font-size: clamp(40px, 8vw, 104px); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 8px 0; }
.fw-film-title { font-family: var(--fw-font-display); font-weight: 600; font-size: clamp(16px, 2vw, 26px); }
.fw-film-rows { display: grid; gap: 10px; }
.fw-film-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: var(--fw-raised); box-shadow: var(--fw-shadow); }
.fw-film-row span:first-child { flex: 1; min-width: 0; font-size: clamp(11px, 1.2vw, 14px); }
.fw-film-dots { position: absolute; left: 5%; right: 5%; bottom: 6%; display: flex; gap: 4px; }
.fw-film-dots i { flex: 1; height: 3px; border-radius: 2px; background: var(--fw-line-2); transition: background 480ms; }
.fw-film-dots i.is-on { background: var(--fw-accent); }
.fw-film figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--fw-muted); }
.fw-team-intro { font-size: 17px; color: var(--fw-muted); margin: 12px 0 28px; }
.fw-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; perspective: 1000px; }
.fw-person { margin: 0; transition: transform 320ms var(--fw-ease); }
.fw-person:hover { transform: rotateY(-8deg) translateY(-4px); }
.fw-person img, .fw-person-initials { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line); }
.fw-person-initials { background: var(--fw-raised); display: grid; place-items: center; font: 600 42px var(--fw-font-display); color: var(--fw-accent-ink); }
.fw-person figcaption { margin-top: 10px; }
.fw-person figcaption b { display: block; font-weight: 600; }
.fw-person figcaption span { font-size: 14px; color: var(--fw-muted); }

/* ---------- Contact ---------- */

.fw-contact-hero { overflow: hidden; border-bottom: 1px solid var(--fw-line); background: radial-gradient(ellipse 55% 70% at 80% 40%, var(--fw-accent-wash), transparent 70%); }
.fw-contact-hero .fw-wrap { padding-top: 56px; padding-bottom: var(--fw-pad-y); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center; }
.fw-contact-hero .fw-eyebrow { margin-bottom: 18px; }
.fw-contact-hero .fw-h1 { text-wrap: initial; }
.fw-contact-hero .fw-lead-lg { margin: 20px 0 28px; max-width: 540px; }
.fw-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; perspective: 900px; }
.fw-channel { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); text-decoration: none; color: var(--fw-text); transition: transform 280ms var(--fw-ease), border-color 280ms, box-shadow 280ms; }
.fw-channel:hover { transform: rotateX(8deg) translateY(-4px); border-color: var(--fw-accent); box-shadow: var(--fw-shadow); color: var(--fw-text); }
.fw-channel-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--fw-radius); background: var(--fw-accent-wash); }
.fw-channel > span:last-child { min-width: 0; }
.fw-channel b { display: block; font-weight: 600; font-size: 14.5px; }
.fw-channel small { display: block; font-size: 13px; color: var(--fw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-chat-stage { position: relative; height: 520px; perspective: 1100px; display: grid; place-items: center; }
.fw-chat-inner { position: relative; width: 270px; height: 500px; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-16deg); }
.fw-chat-phone { position: absolute; inset: 0; border-radius: 40px; border: 1px solid var(--fw-line-2); background: var(--fw-sunken); padding: 10px; box-shadow: var(--fw-shadow); transform: translateZ(0); }
.fw-chat-screen { height: 100%; border-radius: 31px; background: var(--fw-page); overflow: hidden; display: flex; flex-direction: column; }
.fw-chat-top { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--fw-line); background: var(--fw-raised); }
.fw-chat-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--fw-accent); display: grid; place-items: center; color: var(--fw-btn-ink); font: 700 11px var(--fw-font-display); flex: none; }
.fw-chat-top b { display: block; font-weight: 600; font-size: 13px; line-height: 1.2; }
.fw-chat-top small { display: block; font-size: 10.5px; color: var(--fw-ok-ink); }
.fw-chat-body { flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: var(--fw-sunken); overflow: hidden; }
.fw-bubble { max-width: 86%; padding: 7px 10px; font-size: 11.5px; line-height: 1.4; border-radius: 10px 10px 10px 3px; background: var(--fw-raised); border: 1px solid var(--fw-line); align-self: flex-start; animation: fw-bubble 320ms var(--fw-ease); }
.fw-bubble.is-in { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: var(--fw-accent-wash); border-color: var(--fw-accent); }
.fw-bubble small { display: block; text-align: right; font-family: var(--fw-font-num); font-size: 9.5px; color: var(--fw-muted); margin-top: 2px; }
@keyframes fw-bubble { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fw-chat-input { padding: 10px; border-top: 1px solid var(--fw-line); display: flex; gap: 6px; }
.fw-chat-input span:first-child { flex: 1; height: 32px; border-radius: 16px; background: var(--fw-raised); border: 1px solid var(--fw-line); }
.fw-chat-input span:last-child { width: 32px; height: 32px; border-radius: 50%; background: var(--fw-accent); }
.fw-chat-chip1 { left: -70px; top: 70px; transform: translateZ(90px); font-size: 12.5px; }
.fw-chat-chip2 { right: -60px; bottom: 90px; transform: translateZ(130px); font-size: 12.5px; }
@media (max-width: 480px) { .fw-chat-chip1 { left: -20px; } .fw-chat-chip2 { right: -10px; } }
.fw-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 980px) { .fw-contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 44px; } }
/* An admin's video, GIF or image in place of a 3D scene (the hero's phone, or the scene by the form). */
.fw-contact-media { perspective: 1200px; min-width: 0; }
.fw-contact-media-inner { transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-10deg); border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); box-shadow: var(--fw-shadow); overflow: hidden; }
.fw-contact-media-inner > video, .fw-contact-media-inner > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- The message on its way, beside the contact form ----------
   The visitor's card is in front and fills in as they type; the team's inbox waits behind it. Sending
   adds .is-sent, which carries the card into the inbox, where it becomes the newest row, then
   .is-replied brings the reply chip forward. The steps underneath light up in the same order. */

.fw-journey { margin: 0; min-width: 0; display: grid; gap: 14px; }
.fw-journey-stage { position: relative; aspect-ratio: 1 / .9; perspective: 1100px; }
.fw-journey-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-12deg); }
.fw-journey-inner > .fw-grid-floor { top: 34%; }
.fw-journey-inbox { position: absolute; right: 2%; top: 2%; width: 62%; transform: translateZ(-50px); border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); box-shadow: var(--fw-shadow); overflow: hidden; }
.fw-journey-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--fw-line); background: var(--fw-surface); font-size: 12.5px; }
.fw-journey-head i { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--fw-accent); }
.fw-journey-head b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-journey-head span { font-family: var(--fw-font-num); font-size: 11px; color: var(--fw-muted); }
.fw-journey-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--fw-line); font-size: 12.5px; }
.fw-journey-row:last-child { border-bottom: 0; }
.fw-journey-row > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 5px; }
.fw-journey-row i { display: block; width: var(--w); height: 6px; border-radius: 3px; background: var(--fw-line-2); }
.fw-journey-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-journey-row small { font-size: 11.5px; color: var(--fw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-journey-row em { font: 11px var(--fw-font-num); font-style: normal; color: var(--fw-accent-ink); }
.fw-journey-row.is-new { max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; opacity: 0; overflow: hidden; background: var(--fw-accent-wash); transition: max-height 500ms var(--fw-ease) 700ms, padding 500ms var(--fw-ease) 700ms, opacity 400ms 900ms; }
.fw-journey.is-sent .fw-journey-row.is-new { max-height: 60px; padding-top: 10px; padding-bottom: 10px; border-bottom-width: 1px; opacity: 1; }
.fw-journey-avatar { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fw-line); color: var(--fw-muted); font: 700 10px var(--fw-font-body); }
.fw-journey-avatar.is-you, .fw-journey-row.is-new .fw-journey-avatar { background: var(--fw-btn-bg); color: var(--fw-btn-ink); }
.fw-journey-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(10px); fill: none; stroke: var(--fw-accent); opacity: .75; transition: opacity 500ms; }
.fw-journey.is-sent .fw-journey-path { opacity: 0; }
.fw-journey-path path { vector-effect: non-scaling-stroke; stroke-width: 1.5; stroke-dasharray: 4 6; animation: fw-journey-dash 1.4s linear infinite; }
.fw-journey-card { position: absolute; left: 0; bottom: 4%; width: 68%; padding: 16px; transform: translateZ(70px); border: 1px solid var(--fw-accent); border-radius: var(--fw-radius-lg); background: var(--fw-page); box-shadow: 0 0 0 4px var(--fw-accent-wash), var(--fw-shadow); transition: transform 900ms var(--fw-ease), opacity 700ms var(--fw-ease) 200ms; animation: fw-journey-float 5s ease-in-out infinite; }
.fw-journey.is-sent .fw-journey-card { transform: translate3d(50%, -118%, -50px) scale(.4); opacity: 0; animation: none; }
.fw-journey-card-top { display: flex; align-items: center; gap: 10px; }
.fw-journey-card-top > span:nth-child(2) { flex: 1; min-width: 0; }
.fw-journey-card-top b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-journey-card-top small { display: block; font-size: 12px; color: var(--fw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-journey-card-top .fw-chip { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.fw-journey-text { margin: 12px 0 0; min-height: 58px; font-size: 13px; line-height: 1.5; color: var(--fw-text); overflow-wrap: anywhere; }
.fw-journey-text.has-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.fw-journey-text i { display: block; width: 92%; height: 7px; margin: 6px 0 11px; border-radius: 4px; background: var(--fw-line-2); animation: fw-journey-shimmer 1.8s ease-in-out infinite; }
.fw-journey-text i:nth-child(2) { width: 78%; animation-delay: .2s; }
.fw-journey-text i:nth-child(3) { width: 52%; animation-delay: .4s; }
.fw-journey-send { display: inline-flex; align-items: center; height: 30px; margin-top: 12px; padding: 0 12px; border-radius: var(--fw-radius); background: var(--fw-btn-bg); color: var(--fw-btn-ink); font: 600 12px var(--fw-font-body); }
.fw-journey.is-writing .fw-journey-send { animation: fw-journey-pulse 1.6s ease-in-out infinite; }
.fw-journey-chip { right: 0; bottom: 30%; transform: translateZ(120px); font-size: 12.5px; transition: border-color 300ms, box-shadow 300ms; }
.fw-journey.is-replied .fw-journey-chip { border-color: var(--fw-accent); box-shadow: 0 0 0 4px var(--fw-accent-wash), var(--fw-shadow); animation: fw-journey-pop 600ms var(--fw-ease); }
.fw-journey-steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.fw-journey-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--fw-muted); transition: border-color 300ms, background 300ms, color 300ms; }
.fw-journey-steps li.is-on { border-color: var(--fw-accent); background: var(--fw-accent-wash); color: var(--fw-text); }
.fw-journey-steps li.is-done { color: var(--fw-text); }
.fw-journey-num { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fw-accent-wash); color: var(--fw-accent-ink); font: 600 12px var(--fw-font-num); transition: background 300ms, color 300ms; }
.fw-journey-steps li.is-on .fw-journey-num { background: var(--fw-btn-bg); color: var(--fw-btn-ink); }
.fw-journey-steps li.is-done .fw-journey-num { background: var(--fw-ok-wash); color: var(--fw-ok-ink); }
/* On a phone the scene loses what it has no room for: the step under it already says we reply. */
@media (max-width: 560px) {
    .fw-journey-steps { grid-auto-flow: row; }
    .fw-journey-card { width: 86%; }
    .fw-journey-inbox { width: 70%; }
    .fw-journey-row:last-child, .fw-journey-chip, .fw-journey-card-top .fw-chip { display: none; }
}
@keyframes fw-journey-dash { to { stroke-dashoffset: -20; } }
@keyframes fw-journey-float { 50% { translate: 0 -6px; } }
@keyframes fw-journey-shimmer { 50% { opacity: .45; } }
@keyframes fw-journey-pulse { 50% { box-shadow: 0 0 0 5px var(--fw-accent-wash); } }
@keyframes fw-journey-pop { 40% { scale: 1.08; } }
/* Still, for a visitor who pressed Pause on an animation (see FW.reduced in fw-kit.js). This
   used to be @media (prefers-reduced-motion: reduce): see there for why it is not any more. */
:root[data-motion="still"] .fw-journey-card,
:root[data-motion="still"] .fw-journey-row.is-new,
:root[data-motion="still"] .fw-journey-steps li { transition: none; }
:root[data-motion="still"] .fw-journey-card,
:root[data-motion="still"] .fw-journey-path path,
:root[data-motion="still"] .fw-journey-text i,
:root[data-motion="still"] .fw-journey.is-writing .fw-journey-send,
:root[data-motion="still"] .fw-journey.is-replied .fw-journey-chip { animation: none; }

/* The office and "already a customer" under the form, side by side. */
.fw-contact-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 28px; }
@media (min-width: 700px) {
    .fw-contact-more .fw-office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .fw-contact-more .fw-office > .fw-map, .fw-contact-more .fw-office > img { height: 100%; min-height: 170px; aspect-ratio: auto; }
}
.fw-contact-more .fw-customer { display: flex; flex-direction: column; justify-content: center; }
.fw-formcard { min-width: 0; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); padding: clamp(20px, 3vw, 32px); }
.fw-formcard form { display: grid; gap: 14px; }
.fw-formcard h2 { font-family: var(--fw-font-display); font-size: 26px; font-weight: 600; margin: 0 0 4px; }
.fw-office { border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); overflow: hidden; }
.fw-office > img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fw-map { position: relative; aspect-ratio: 16 / 10; perspective: 600px; overflow: hidden; background: var(--fw-sunken); }
.fw-map-plane { position: absolute; inset: -30% -10% -10%; transform: rotateX(55deg); transform-origin: 50% 60%; background: repeating-linear-gradient(0deg, transparent 0 23px, var(--fw-line) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, var(--fw-line) 23px 24px); }
.fw-map-plane i:first-child { position: absolute; left: 10%; right: 10%; top: 52%; height: 10px; background: var(--fw-surface); border-radius: 5px; }
.fw-map-plane i:last-child { position: absolute; left: 44%; top: 10%; bottom: 10%; width: 10px; background: var(--fw-surface); border-radius: 5px; }
.fw-map-pin { position: absolute; left: 50%; top: 38%; transform: translate(-50%, 0); transition: transform 700ms cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .4)); }
.fw-map-pin.is-up { transform: translate(-50%, -10px); }
.fw-map-pin svg { fill: var(--fw-accent); stroke: var(--fw-page); stroke-width: 1.2; }
.fw-office-body { padding: 18px; }
.fw-office-body h2 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.fw-office-body p { font-size: 14.5px; color: var(--fw-muted); white-space: pre-line; }
.fw-office-body .fw-hours { margin-top: 10px; font-family: var(--fw-font-num); font-size: 12.5px; color: var(--fw-text); }
.fw-customer { padding: 18px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); }
.fw-customer b { display: block; font-weight: 600; margin-bottom: 4px; }
.fw-customer p { margin: 0 0 10px; font-size: 14px; color: var(--fw-muted); }
.fw-customer a { font-weight: 600; font-size: 14.5px; }

/* ---------- Book a demo ---------- */

.fw-demo { padding: 48px 0 var(--fw-pad-y); background: radial-gradient(ellipse 50% 60% at 20% 20%, var(--fw-accent-wash), transparent 70%); }
.fw-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: start; }
.fw-demo-intro { font-size: 18px; color: var(--fw-muted); margin: 18px 0 24px; text-wrap: pretty; }
.fw-demo .fw-ticks { margin-bottom: 36px; font-size: 15.5px; }
.fw-demo .fw-ticks .fw-check { margin-top: 3px; }
.fw-laptop { perspective: 1400px; padding: 10px 0 30px; }
.fw-laptop-inner { position: relative; transform-style: preserve-3d; transform: rotateX(10deg) rotateY(12deg); }
.fw-laptop-screen { border-radius: 14px 14px 4px 4px; border: 1px solid var(--fw-line-2); background: var(--fw-sunken); padding: 8px; box-shadow: var(--fw-shadow); }
.fw-laptop-view { border-radius: 8px; overflow: hidden; background: var(--fw-raised); }
.fw-laptop-view video, .fw-laptop-view img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fw-board { aspect-ratio: 16 / 10; display: flex; flex-direction: column; }
.fw-board-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--fw-line); background: var(--fw-surface); font-size: 11.5px; }
.fw-board-head i { width: 7px; height: 7px; border-radius: 2px; background: var(--fw-accent); }
.fw-board-head b { font-weight: 600; }
.fw-board-head span { margin-left: auto; font-family: var(--fw-font-num); color: var(--fw-muted); }
.fw-board-cols { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.fw-board-col { border-radius: 6px; background: var(--fw-sunken); padding: 6px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fw-board-col > span { font-family: var(--fw-font-num); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--fw-muted); }
.fw-board-card { padding: 5px 6px; border-radius: 5px; background: var(--fw-raised); border: 1px solid var(--fw-line); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .5); animation: fw-bubble 320ms var(--fw-ease); }
.fw-board-col:last-child .fw-board-card { border-color: var(--fw-ok-ink); }
.fw-board-card b { display: block; font-family: var(--fw-font-num); font-size: 9.5px; font-weight: 400; }
.fw-board-card small { display: block; font-size: 10px; color: var(--fw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-laptop-base { height: 14px; margin: 0 -4%; border-radius: 0 0 14px 14px; background: linear-gradient(var(--fw-surface), var(--fw-sunken)); border: 1px solid var(--fw-line-2); border-top: 0; transform: rotateX(-70deg); transform-origin: top; }
.fw-laptop-toast { right: -3%; top: -6%; transform: translateZ(80px); font-size: 12.5px; font-weight: 600; padding: 9px 13px; }
.fw-booker { position: sticky; top: 89px; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); box-shadow: var(--fw-shadow); overflow: hidden; }
.fw-booker-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--fw-line); }
.fw-booker-steps li, .fw-stepper li { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; font-size: 13.5px; font-weight: 600; color: var(--fw-muted); border-bottom: 2px solid transparent; }
.fw-booker-steps li.is-on { color: var(--fw-text); border-bottom-color: var(--fw-accent); }
.fw-booker-steps li.is-done { color: var(--fw-text); }
.fw-stepnum { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--fw-font-num); font-size: 11px; background: var(--fw-line); color: var(--fw-text); flex: none; }
.is-on > .fw-stepnum { background: var(--fw-accent); color: var(--fw-btn-ink); }
.is-done > .fw-stepnum { background: var(--fw-ok-wash); color: var(--fw-ok-ink); }
.fw-booker-pane { padding: clamp(18px, 3vw, 26px); }
.fw-booker-pane[hidden] { display: none; }
.fw-booker-pane h2 { font-family: var(--fw-font-display); font-size: 22px; font-weight: 600; }
.fw-booker-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.fw-booker-top span { font-family: var(--fw-font-num); font-size: 12px; color: var(--fw-muted); }
.fw-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fw-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line); background: var(--fw-page); color: var(--fw-text); font: inherit; cursor: pointer; transition: all 200ms; }
.fw-day small { font-size: 11px; color: var(--fw-muted); }
.fw-day b { font-family: var(--fw-font-num); font-size: 18px; font-weight: 500; }
.fw-day[aria-checked="true"] { border-color: var(--fw-accent); background: var(--fw-accent-wash); transform: translateY(-2px); box-shadow: 0 8px 16px -10px var(--fw-accent); }
.fw-daylabel { font-size: 14px; font-weight: 500; margin: 20px 0 8px; }
.fw-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.fw-slot { height: 42px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: transparent; color: var(--fw-text); font: 500 14px var(--fw-font-num); cursor: pointer; }
.fw-slot[aria-checked="true"] { border-color: var(--fw-accent); background: var(--fw-accent); color: var(--fw-btn-ink); }
.fw-slot[disabled] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.fw-booker-note { font-size: 12.5px; color: var(--fw-muted); margin: 12px 0 18px; }
.fw-booker form { display: grid; gap: 14px; }
.fw-when { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--fw-radius); background: var(--fw-accent-wash); font-size: 14px; }
.fw-when b { font-weight: 600; }
.fw-when button { border: 0; background: transparent; color: var(--fw-accent-ink); font: 600 13px var(--fw-font-body); cursor: pointer; }
.fw-booked { display: grid; gap: 16px; }
.fw-cal { perspective: 600px; width: 84px; height: 92px; }
.fw-cal-tile { width: 84px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--fw-line-2); background: var(--fw-page); display: flex; flex-direction: column; box-shadow: var(--fw-shadow); transform: rotateY(18deg) rotateX(8deg); transition: transform 1600ms ease-in-out; }
.fw-cal-tile.is-flip { transform: rotateY(-18deg) rotateX(8deg); }
.fw-cal-tile span { height: 24px; background: var(--fw-accent); color: var(--fw-btn-ink); font: 600 11px var(--fw-font-num); display: grid; place-items: center; letter-spacing: .08em; }
.fw-cal-tile b { flex: 1; display: grid; place-items: center; font: 500 34px var(--fw-font-num); }
.fw-booked h2 { font-size: 28px; }
.fw-booked > p { color: var(--fw-muted); }
.fw-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 14px; border-radius: var(--fw-radius); background: var(--fw-sunken); border: 1px solid var(--fw-line); font-size: 14px; }
.fw-dl dt { color: var(--fw-muted); }
.fw-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fw-dl.is-mono dd { font-family: var(--fw-font-num); font-weight: 400; }
@media (max-width: 980px) { .fw-booker { position: static; } }

/* ---------- Start free trial ---------- */

.fw-signup { padding: 40px 0 var(--fw-pad-y); background: radial-gradient(ellipse 50% 50% at 85% 10%, var(--fw-accent-wash), transparent 70%); }
.fw-signup-head { max-width: 720px; margin-bottom: 28px; }
.fw-signup-head h1 { font-family: var(--fw-font-display); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.fw-signup-head .fw-lead { margin-top: 14px; }
.fw-stepper { list-style: none; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fw-stepper li { height: auto; justify-content: flex-start; border: 0; }
.fw-stepper li.is-on, .fw-stepper li.is-done { color: var(--fw-text); }
.fw-stepper .fw-stepnum { width: 24px; height: 24px; font-size: 11.5px; }
.fw-signup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }
.fw-signup-card { border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); box-shadow: var(--fw-shadow); padding: clamp(20px, 3vw, 32px); min-width: 0; }
.fw-signup-card h2 { font-family: var(--fw-font-display); font-size: 24px; font-weight: 600; margin: 0 0 16px; }
.fw-signup-card h2.is-tight { margin-bottom: 6px; }
.fw-pane[hidden] { display: none; }
.fw-pane-intro { margin: 0 0 16px; font-size: 14.5px; color: var(--fw-muted); }
.fw-modes { display: grid; gap: 10px; }
.fw-mode { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); background: var(--fw-page); color: var(--fw-text); font: inherit; cursor: pointer; transition: all 200ms; text-align: left; }
.fw-mode[aria-checked="true"] { border-color: var(--fw-accent); background: var(--fw-accent-wash); }
.fw-radio { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid var(--fw-line-2); background: var(--fw-page); transition: border 160ms; }
[aria-checked="true"] > .fw-radio { border: 6px solid var(--fw-accent); }
.fw-mode > span:nth-child(2) { flex: 1; }
.fw-mode b { display: block; font-weight: 600; font-size: 16.5px; }
.fw-mode small { display: block; font-size: 14px; color: var(--fw-muted); margin-top: 2px; }
.fw-mode em { font-style: normal; font-family: var(--fw-font-num); font-size: 13px; color: var(--fw-accent-ink); white-space: nowrap; }
.fw-plan-prompt { font-weight: 600; font-size: 15px; margin: 22px 0 10px; }
.fw-planpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fw-planbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line); background: var(--fw-page); color: var(--fw-text); font: inherit; cursor: pointer; text-align: left; transition: all 200ms; }
.fw-planbtn[aria-checked="true"] { border-color: var(--fw-accent); background: var(--fw-accent-wash); transform: translateY(-3px); box-shadow: 0 12px 24px -16px var(--fw-accent); }
.fw-planbtn b { font-weight: 600; }
.fw-planbtn strong { font-family: var(--fw-font-num); font-size: 18px; font-weight: 400; }
.fw-planbtn small { font-size: 12px; color: var(--fw-muted); }
.fw-vehicles { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.fw-vehicles label { font-weight: 600; font-size: 15px; }
.fw-stepperbox { display: flex; align-items: center; gap: 6px; }
.fw-stepperbox button { width: 40px; height: 40px; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); background: transparent; color: var(--fw-text); font: 600 18px var(--fw-font-body); cursor: pointer; }
.fw-stepperbox input { width: 80px; height: 40px; text-align: center; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); background: var(--fw-sunken); color: var(--fw-text); font: 500 17px var(--fw-font-num); }
.fw-pane-btns { display: flex; gap: 10px; margin-top: 24px; }
.fw-pane-btns .fw-btn-primary { flex: 1; }
.fw-pane-btns .fw-btn-outline { padding: 0 18px; }
.fw-pane-fields { display: grid; gap: 14px; }
.fw-colour-label { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
/* The sign-up wizard's theme cards (5 Oct 2026): the CRM's system themes, each drawn from its own
   colours (--tm-*, set inline from the theme row), and Custom, drawn by signup.js from one colour. */
.fw-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.fw-theme { display: grid; gap: 8px; padding: 8px; min-width: 0; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-line-2); background: var(--fw-page); color: var(--fw-text); font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms, background 160ms, transform 160ms; }
.fw-theme:hover { border-color: var(--fw-accent); }
.fw-theme[aria-checked="true"] { border-color: var(--fw-accent); background: var(--fw-accent-wash); box-shadow: inset 0 0 0 1px var(--fw-accent); }
.fw-theme:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 2px; }
.fw-theme-mini { display: grid; grid-template-columns: 26% minmax(0, 1fr); grid-template-rows: 24% minmax(0, 1fr); aspect-ratio: 16 / 10; border-radius: var(--fw-radius); overflow: hidden; background: var(--tm-page); border: 1px solid var(--fw-line); }
.fw-tm-side { grid-row: 1 / 3; background: linear-gradient(180deg, var(--tm-side), var(--tm-side-end, var(--tm-side))); }
.fw-tm-head { background: var(--tm-head); }
.fw-tm-card { margin: 12% 14%; padding: 6px; border-radius: 3px; background: var(--tm-card); border: 1px solid color-mix(in srgb, var(--tm-side) 14%, transparent); display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; }
.fw-tm-btn { width: 52%; height: 8px; border-radius: 2px; background: var(--tm-primary); }
.fw-tm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tm-accent); flex: none; }
.fw-theme-name { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-theme-name svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.fw-theme-custom { margin-top: 12px; padding: 14px; border: 1px dashed var(--fw-line-2); border-radius: var(--fw-radius-lg); }
.fw-theme-custom[hidden] { display: none; }
.fw-theme-custom-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fw-theme-custom .fw-fine { margin: 10px 0 0; }
.fw-pw { display: flex; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius); background: var(--fw-sunken); overflow: hidden; }
.fw-pw input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 0; background: transparent; color: var(--fw-text); font: 15px var(--fw-font-body); outline: none; }
.fw-pw button { padding: 0 12px; border: 0; border-left: 1px solid var(--fw-line); background: transparent; color: var(--fw-muted); font: 500 13px var(--fw-font-body); cursor: pointer; }
.fw-pw:focus-within { outline: 2px solid var(--fw-accent); }
.fw-pwbars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fw-pwbars i { height: 4px; border-radius: 2px; background: var(--fw-line-2); transition: background 200ms; }
.fw-pwbars i.is-weak { background: var(--fw-due-ink); }
.fw-pwbars i.is-good { background: var(--fw-ok-ink); }
.fw-pwrules { display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 400; font-size: 12.5px; }
.fw-pwrules span { color: var(--fw-muted); }
.fw-pwrules span.is-ok { color: var(--fw-ok-ink); }
.fw-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; }
.fw-terms input { margin-top: 4px; accent-color: var(--fw-accent); width: 16px; height: 16px; flex: none; }
.fw-pay-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.fw-pay-head h2 { margin: 0; }
.fw-testmode { font-family: var(--fw-font-num); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--fw-radius); background: var(--fw-due-wash); color: var(--fw-due-ink); }
.fw-cardset { border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); padding: 16px; margin: 0; display: grid; gap: 12px; background: var(--fw-page); min-width: 0; }
.fw-cardset legend { padding: 0 6px; font-size: 13px; color: var(--fw-muted); display: flex; align-items: center; gap: 6px; }
.fw-cardset legend svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.fw-cardset .fw-field { font-size: 13.5px; }
.fw-stripe-el { height: 46px; padding: 13px 12px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line-2); background: var(--fw-sunken); }
.fw-stripe-el.StripeElement--focus { outline: 2px solid var(--fw-accent); border-color: transparent; }
.fw-stripe-el.StripeElement--invalid { border-color: var(--fw-bad-ink); }
.fw-cube-wrap { display: grid; gap: 22px; justify-items: center; text-align: center; padding: 12px 0; }
.fw-cube-box { width: 120px; height: 120px; perspective: 500px; }
.fw-cube { position: relative; width: 120px; height: 120px; transform-style: preserve-3d; }
.fw-cube div { position: absolute; inset: 0; display: grid; place-items: center; font: 700 30px var(--fw-font-display); border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; opacity: .92; }
.fw-prov { list-style: none; display: grid; gap: 8px; width: 100%; max-width: 420px; text-align: left; }
.fw-prov li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--fw-radius); border: 1px solid var(--fw-line); background: var(--fw-page); color: var(--fw-muted); font-size: 14.5px; transition: all 300ms; }
.fw-prov li.is-on { background: var(--fw-accent-wash); color: var(--fw-text); }
.fw-prov li.is-done { color: var(--fw-text); }
.fw-prov li span { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--fw-line); color: var(--fw-accent-ink); }
.fw-prov li.is-done span { background: var(--fw-ok-wash); color: var(--fw-ok-ink); }
.fw-ready { display: grid; gap: 16px; }
.fw-ready-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--fw-ok-wash); color: var(--fw-ok-ink); }
.fw-ready-icon svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fw-ready h2 { font-family: var(--fw-font-display); font-size: 30px; font-weight: 600; margin: 0; }
.fw-ready > p { color: var(--fw-muted); font-size: 16px; }
.fw-ready .fw-dl { padding: 16px; }
.fw-ready .fw-btn { height: 54px; }
.fw-redirect { font-size: 13.5px; color: var(--fw-muted); text-align: center; }
.fw-redirect button { border: 0; background: transparent; color: var(--fw-accent-ink); font: 600 13.5px var(--fw-font-body); cursor: pointer; padding: 0; }
.fw-signup-aside { position: sticky; top: 89px; display: grid; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .fw-signup-aside { position: static; } }
.fw-card3d { perspective: 1200px; display: grid; place-items: center; padding: 10px 0; }
.fw-card3d[hidden] { display: none; }
.fw-card3d-inner { position: relative; width: min(100%, 360px); aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform 700ms var(--fw-ease); transform: rotateY(-12deg) rotateX(8deg); }
.fw-card3d-inner.is-back { transform: rotateY(180deg); }
.fw-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; border: 1px solid var(--fw-line-2); box-shadow: var(--fw-shadow); }
.fw-card-front { padding: 22px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, var(--fw-accent-deep), var(--fw-surface) 70%); color: #fff; }
.fw-card-chiprow { display: flex; justify-content: space-between; align-items: center; }
.fw-card-chiprow i { width: 42px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #E8C66A, #B28A2E); }
.fw-card-chiprow b { font: 600 14px var(--fw-font-display); letter-spacing: .06em; }
.fw-card-num { font: 500 clamp(16px, 2.2vw, 21px) var(--fw-font-num); letter-spacing: .12em; }
.fw-card-foot { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.fw-card-foot small { display: block; opacity: .7; font-size: 11px; }
.fw-card-foot b { font-size: 13px; font-weight: 400; }
.fw-card-foot span:last-child { text-align: right; }
.fw-card-foot span:last-child b { font-family: var(--fw-font-num); }
.fw-card-back { transform: rotateY(180deg); background: linear-gradient(135deg, var(--fw-surface), var(--fw-sunken)); overflow: hidden; }
.fw-card-stripe { height: 40px; background: #000; margin-top: 24px; }
.fw-card-sign { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 18px 20px; }
.fw-card-sign i { flex: 1; height: 34px; background: repeating-linear-gradient(90deg, #ddd 0 6px, #eee 6px 12px); border-radius: 4px; }
.fw-card-sign b { font: 600 16px var(--fw-font-num); color: var(--fw-text); background: var(--fw-page); padding: 6px 10px; border-radius: 4px; }
.fw-pv { perspective: 1200px; padding: 6px 0; }
.fw-pv[hidden] { display: none; }
/* The preview is drawn in the chosen CRM theme's own colours (signup.js sets the --pv-* values from
   the theme, working out the sidebar and header text the way the CRM's layout does), so it looks
   the same in the website's light and dark modes. Until the script runs, the site's own tokens. */
.fw-pv-inner { transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-12deg); border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--pv-page, var(--fw-page)); color: var(--pv-body, var(--fw-text)); box-shadow: var(--fw-shadow); overflow: hidden; }
.fw-pv-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--pv-head, var(--fw-raised)); color: var(--pv-head-ink, var(--fw-text)); min-width: 0; }
.fw-pv-top .fw-mock-initials { font-size: 11px; background: var(--pv-accent, var(--pv)); color: var(--pv-accent-ink, var(--pv-ink)); }
.fw-pv-top em { margin-left: auto; font-style: normal; font-family: var(--fw-font-num); font-size: 10.5px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; }
.fw-pv-body { display: grid; grid-template-columns: 110px minmax(0, 1fr); min-height: 230px; }
.fw-pv-nav { padding: 8px 6px; display: grid; gap: 2px; align-content: start; background: linear-gradient(180deg, var(--pv-side, var(--fw-raised)), var(--pv-side-end, var(--pv-side, var(--fw-raised)))); }
.fw-pv-nav span { padding: 6px 8px; border-radius: var(--fw-radius); font-size: 11.5px; color: var(--pv-side-ink, var(--fw-muted)); }
.fw-pv-nav span:first-child { background: var(--pv-sel, var(--fw-accent-wash)); color: var(--pv-sel-ink, var(--fw-text)); font-weight: 600; }
.fw-pv-main { padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.fw-pv-hello { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fw-pv-hello b { font-family: var(--fw-font-display); font-weight: 600; color: var(--pv-heading, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-pv-hello > span { height: 26px; padding: 0 10px; border-radius: var(--fw-radius); background: var(--pv, var(--fw-accent)); color: var(--pv-ink, var(--fw-page)); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; white-space: nowrap; }
.fw-pv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fw-pv-stats div { padding: 8px; border: 1px solid var(--pv-line, var(--fw-line)); border-radius: var(--fw-radius); background: var(--pv-card, transparent); min-width: 0; }
.fw-pv-stats small { display: block; font-size: 10.5px; opacity: .72; }
.fw-pv-stats b { font: 500 16px var(--fw-font-num); color: var(--pv-heading, inherit); }
.fw-pv-line { padding: 9px; border-radius: var(--fw-radius); background: var(--pv-wash, var(--fw-accent-wash)); font-size: 11.5px; box-shadow: inset 2px 0 0 var(--pv-accent, var(--fw-accent)); }
.fw-summary { border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-raised); padding: 18px; }
.fw-summary-tag { font-family: var(--fw-font-num); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fw-muted); margin-bottom: 10px; }
.fw-summary-row { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.fw-summary-row span:last-child { font-family: var(--fw-font-num); }
.fw-summary-line { font-size: 13.5px; color: var(--fw-muted); margin-top: 4px; }
.fw-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--fw-line); font-size: 14px; }
.fw-summary dl[hidden] { display: none; }
.fw-summary dt { color: var(--fw-muted); }
.fw-summary dd { margin: 0; font-family: var(--fw-font-num); }
.fw-summary dt.is-strong { color: var(--fw-text); font-weight: 600; }
.fw-summary dd.is-strong { font-weight: 600; }
.fw-summary-trial { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fw-line); font-size: 14px; display: flex; justify-content: space-between; }
.fw-summary-trial[hidden] { display: none; }
.fw-summary-trial span:first-child { color: var(--fw-muted); }
.fw-summary-trial span:last-child { font-family: var(--fw-font-num); font-weight: 600; }

/* ---------- Tracking pages ----------
   /track: the lookup form beside a 3D phone that walks a made-up booking through the stages the
   real page shows; /track/{token}: the booking itself, its steps drawn in one by one and each
   journey's route bar filled to its stage. Neither shows where a vehicle is. */

.fw-track { padding: 56px 0 var(--fw-pad-y); background: radial-gradient(ellipse 60% 45% at 50% 0%, var(--fw-accent-wash), transparent 70%); }
.fw-track-card { max-width: 640px; margin: 0 auto; border: 1px solid var(--fw-line-2); border-radius: var(--fw-radius-lg); background: var(--fw-raised); padding: clamp(20px, 3vw, 32px); box-shadow: var(--fw-shadow); }
.fw-track-card.is-hero { max-width: none; margin: 28px 0 0; }
.fw-track-card h1 { display: flex; align-items: center; gap: 12px; font-family: var(--fw-font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.02em; }
.fw-track-card .fw-lead { margin: 10px 0 20px; }
.fw-track-card form { display: grid; gap: 14px; }
.fw-track-updated { display: block; font-size: 14px; }
.fw-error.is-due { color: var(--fw-due-ink); }
.fw-track-pulse { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--fw-accent); }
.fw-track-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--fw-accent); animation: fw-track-ping 1.8s ease-out infinite; }
.fw-track-pulse.is-done { background: var(--fw-ok-ink); }
.fw-track-pulse.is-done::after { display: none; }
.fw-track-steps { list-style: none; display: grid; margin-top: 20px; }
.fw-track-steps li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--fw-line-2); margin-left: 6px; animation: fw-track-in 500ms var(--fw-ease) calc(var(--i, 0) * 140ms) both; }
.fw-track-steps li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--fw-line-2); background: var(--fw-page); }
.fw-track-steps li.is-done { border-left-color: var(--fw-accent); }
.fw-track-steps li.is-done::before { background: var(--fw-accent); border-color: var(--fw-accent); }
.fw-track-steps li.is-now::before { border: 3px solid var(--fw-accent); animation: fw-track-ring 1.8s ease-out infinite; }
.fw-track-steps li:last-child { border-left-color: transparent; }
.fw-track-steps b { display: block; font-weight: 600; }
.fw-track-steps small { color: var(--fw-muted); font-size: 13px; }
.fw-track-stops { display: grid; gap: 10px; margin-top: 8px; }
.fw-track-stop { padding: 14px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-page); }
.fw-track-stop.is-cancelled { opacity: .55; }
.fw-track-stop-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fw-track-stop-top b { font-weight: 600; }
.fw-track-stop-lines { display: grid; gap: 2px; margin-top: 10px; font-size: 13.5px; color: var(--fw-muted); }
.fw-track-contact { margin-top: 18px; font-size: 14px; }
.fw-track-again { margin-top: 12px; }

/* A journey's route bar: the van sits at --p along it (its stage, not a position). */
.fw-track-route { margin-top: 12px; }
.fw-track-ends { display: flex; justify-content: space-between; gap: 10px; font: 12px var(--fw-font-num); color: var(--fw-muted); }
.fw-track-line { position: relative; height: 6px; margin: 14px 12px 8px; border-radius: 3px; background: var(--fw-line); }
.fw-track-line i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 3px; background: var(--fw-accent); transition: width 900ms var(--fw-ease); }
.fw-track-line b { position: absolute; top: 50%; left: var(--p); width: 28px; height: 28px; margin: -14px 0 0 -14px; display: grid; place-items: center; border-radius: 50%; background: var(--fw-btn-bg); color: var(--fw-btn-ink); box-shadow: 0 0 0 4px var(--fw-accent-wash); transition: left 900ms var(--fw-ease); }
.fw-track-line b svg { stroke: currentColor; stroke-width: 1.8; }
.fw-track-stop .fw-track-line i { animation: fw-track-grow 1.2s var(--fw-ease) 300ms both; }
.fw-track-stop .fw-track-line b { animation: fw-track-slide 1.2s var(--fw-ease) 300ms both; }

/* The lookup page's hero and its 3D phone. */
.fw-track-hero { overflow: hidden; border-bottom: 1px solid var(--fw-line); background: radial-gradient(ellipse 55% 70% at 80% 40%, var(--fw-accent-wash), transparent 70%); }
.fw-track-hero .fw-wrap { padding-top: 56px; padding-bottom: var(--fw-pad-y); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
.fw-track-hero .fw-eyebrow { margin-bottom: 18px; }
.fw-track-hero .fw-lead-lg { margin: 20px 0 0; max-width: 560px; }
.fw-track-fig { margin: 0; min-width: 0; }
.fw-track-stage { position: relative; height: 520px; perspective: 1100px; display: grid; place-items: center; }
.fw-track-inner { position: relative; width: 290px; height: 470px; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-16deg); }
.fw-track-inner > .fw-grid-floor { left: -45%; right: -45%; top: 45%; bottom: -14%; }
.fw-track-phone { position: absolute; inset: 0; border-radius: 40px; border: 1px solid var(--fw-line-2); background: var(--fw-sunken); padding: 10px; box-shadow: var(--fw-shadow); transform: translateZ(0); }
.fw-track-screen { height: 100%; border-radius: 31px; background: var(--fw-page); padding: 28px 18px 18px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.fw-track-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; color: var(--fw-muted); }
.fw-track-top .fw-eyebrow { margin: 0; font-size: 10px; }
.fw-track-head { font-family: var(--fw-font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; min-height: 56px; transition: opacity 220ms; }
.fw-track-head.is-swap { opacity: 0; }
.fw-track-mini { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.fw-track-mini::before, .fw-track-mini::after { content: ""; position: absolute; left: 12.5%; top: 6px; height: 2px; }
.fw-track-mini::before { right: 12.5%; background: var(--fw-line-2); }
.fw-track-mini::after { width: calc((var(--done, 1) - 1) / 3 * 75%); background: var(--fw-accent); transition: width 700ms var(--fw-ease); }
.fw-track-mini li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; font-size: 10.5px; color: var(--fw-muted); text-align: center; }
.fw-track-mini li i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fw-line-2); background: var(--fw-page); transition: background 300ms, border-color 300ms; }
.fw-track-mini li.is-done { color: var(--fw-text); }
.fw-track-mini li.is-done i { background: var(--fw-accent); border-color: var(--fw-accent); }
.fw-track-mini li.is-now i { animation: fw-track-ring 1.8s ease-out infinite; }
.fw-track-window { margin-top: auto; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius); font-size: 11.5px; color: var(--fw-muted); }
.fw-track-window b { font: 500 12.5px var(--fw-font-num); color: var(--fw-text); }
.fw-track-chip1 { left: -150px; top: 272px; transform: translateZ(90px); max-width: 270px; white-space: normal; align-items: flex-start; font-size: 12.5px; line-height: 1.4; }
.fw-track-chip1 small { display: block; font-size: 10.5px; font-weight: 600; color: var(--fw-ok-ink); }
.fw-track-chip1 em { font-style: normal; font-weight: 600; }
.fw-track-wa { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fw-ok-wash); color: var(--fw-ok-ink); }
.fw-track-wa svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fw-track-chip2 { right: -80px; bottom: 76px; transform: translateZ(130px); font-size: 12.5px; }
.fw-float-chip.fw-track-chip2 i { background: var(--fw-accent); animation: fw-track-blink 1.2s ease-in-out infinite; }
@media (max-width: 560px) {
    .fw-track-stage { height: 490px; }
    .fw-track-chip1 { left: -24px; top: 262px; max-width: 220px; }
    .fw-track-chip2 { right: -12px; bottom: 28px; }
}

/* How it works: three cards, each icon with a small movement of its own. */
.fw-track-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; perspective: 1000px; }
.fw-track-howcard { display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); background: var(--fw-page); transition: transform 320ms var(--fw-ease), box-shadow 320ms, border-color 320ms; }
.fw-track-howcard:hover { transform: rotateX(6deg) translateY(-4px); border-color: var(--fw-accent); box-shadow: var(--fw-shadow); }
.fw-track-howcard b { font-weight: 600; font-size: 17px; }
.fw-track-howcard p { margin: 0; font-size: 14.5px; color: var(--fw-muted); }
.fw-track-howicon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--fw-radius); background: var(--fw-accent-wash); color: var(--fw-accent-ink); }
.fw-track-howicon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: fw-track-bob 2.4s ease-in-out infinite; }
.fw-track-howicon.is-steps { display: flex; justify-content: center; align-items: center; gap: 5px; }
.fw-track-howicon.is-steps i { width: 7px; height: 7px; border-radius: 50%; background: var(--fw-accent); opacity: .3; animation: fw-track-seq 2s ease-in-out infinite; }
.fw-track-howicon.is-steps i:nth-child(2) { animation-delay: .25s; }
.fw-track-howicon.is-steps i:nth-child(3) { animation-delay: .5s; }
.fw-track-howicon.is-steps i:nth-child(4) { animation-delay: .75s; }

@keyframes fw-track-ping { to { transform: scale(2.8); opacity: 0; } }
@keyframes fw-track-ring { 0% { box-shadow: 0 0 0 0 var(--fw-accent-wash); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes fw-track-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes fw-track-grow { from { width: 0; } }
@keyframes fw-track-slide { from { left: 0; } }
@keyframes fw-track-blink { 50% { opacity: .3; } }
@keyframes fw-track-bob { 50% { transform: translateY(-3px); } }
@keyframes fw-track-seq { 25%, 60% { opacity: 1; } }
/* Still, for a visitor who pressed Pause on an animation (see FW.reduced in fw-kit.js). This
   used to be @media (prefers-reduced-motion: reduce): see there for why it is not any more. */
:root[data-motion="still"] .fw-track-pulse::after,
:root[data-motion="still"] .fw-track-steps li,
:root[data-motion="still"] .fw-track-steps li.is-now::before,
:root[data-motion="still"] .fw-track-stop .fw-track-line i,
:root[data-motion="still"] .fw-track-stop .fw-track-line b,
:root[data-motion="still"] .fw-track-mini li.is-now i,
:root[data-motion="still"] .fw-float-chip.fw-track-chip2 i,
:root[data-motion="still"] .fw-track-howicon svg,
:root[data-motion="still"] .fw-track-howicon.is-steps i { animation: none; }
:root[data-motion="still"] .fw-track-howicon.is-steps i { opacity: 1; }
:root[data-motion="still"] .fw-track-line i,
:root[data-motion="still"] .fw-track-line b,
:root[data-motion="still"] .fw-track-mini::after,
:root[data-motion="still"] .fw-track-howcard { transition: none; }

/* ---------- Error and maintenance ---------- */

.fw-empty { padding: 96px 0; text-align: center; }
.fw-empty .fw-lead { margin: 14px auto 26px; max-width: 520px; }
.fw-empty .fw-btnrow { justify-content: center; }

/* ---------- Builder preview (admin iframe) ---------- */

body.fw-builder [data-block-id] { position: relative; cursor: pointer; }
body.fw-builder [data-block-id]:hover { outline: 2px dashed rgba(45, 85, 200, .6); outline-offset: -2px; }
body.fw-builder [data-block-id].is-selected { outline: 2px solid #2D55C8; outline-offset: -2px; }
body.fw-builder [data-block-id].is-hidden-block { opacity: .45; background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--fw-line) 6px 7px); }
body.fw-builder .fw-block-tag { position: absolute; top: 0; left: 0; z-index: 30; background: #2D55C8; color: #fff; font: 600 11px var(--fw-font-body); padding: 3px 8px; border-radius: 0 0 6px 0; pointer-events: none; }
body.fw-builder .fw-hidden-note { padding: 14px 16px; text-align: center; font: 500 12px var(--fw-font-body); color: var(--fw-muted); }

/* ---------- Small pieces the markup relies on ---------- */

.fw-ico-light { display: none; }
:root[data-theme="light"] .fw-ico-dark { display: none; }
:root[data-theme="light"] .fw-ico-light { display: inline; }
[id] { scroll-margin-top: 80px; }
.fw-num { font-family: var(--fw-font-num); color: var(--fw-text); }
.fw-hero-scene { position: absolute; inset: 0; }
.fw-hero-text { min-width: 0; }
.fw-principle p, .fw-principle h3 { margin: 0; }
.fw-lightbox figure { max-width: min(1200px, 100%); }
[hidden] { display: none !important; }

/* On a phone every hero is the split layout, as the design has it. */
@media (max-width: 719px) {
    .fw-hero.is-centred .fw-hero-wrap { display: grid; padding-top: 56px; }
    .fw-hero.is-centred .fw-hero-text { text-align: left; align-items: flex-start; }
    .fw-hero.is-centred .fw-hero-btns, .fw-hero.is-centred .fw-hero-micro { justify-content: flex-start; }
}
.fw-callout { padding: 14px 16px; border: 1px solid var(--fw-due-ink); border-radius: var(--fw-radius-lg); background: var(--fw-due-wash); }
.fw-callout p { margin: 0; }
.fw-table-wrap { width: 100%; overflow-x: auto; }
.fw-table-wrap table { display: table; }

/* ---------- The admin's preview label (?preview=1, signed-in admin only) ---------- */
.fw-preview-flag { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: var(--fw-radius-lg); background: var(--fw-due); color: var(--fw-page); font: 500 13px/1.3 var(--fw-font-body); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.fw-preview-flag b { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.fw-preview-flag button { width: 26px; height: 26px; flex: none; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .12); color: inherit; font-size: 17px; line-height: 1; cursor: pointer; }