/* ---- spoor (Spoor — Fleet tracking & telematics 189) — a cold-morning page:
   bone ground, graphite ink, one steel hairline, and a signal amber spent on
   exactly three jobs — the hero slab, the third tier's cap and the contact
   submit. Nothing else on the page is ever amber.

   THE STRUCTURAL MOVE: the page has exactly two full-width moments, the
   three-slide stage and the slate footer, and every rung between them is
   contained at one measure that never changes. That measure is enforced by a
   single 2px steel rule reused three times — one rule sets the four welded
   icon cards, the four text-only operator cards and the four price tiers, so
   they read as one repeated beat rather than three designs. The features
   section carries no top padding at all, so the first of those rules lands
   flush on the bottom edge of the photograph.

   nth-child is used only INSIDE .ws-pricing-grid and .ws-testimonials-grid,
   where every sibling is the same element; nothing here uses :nth-of-type,
   which would match the section element and silently miss (the hero is always
   the first section). */
body.t-spoor.ws-body {
  --bg: #f3f1ec; --fg: #2a3034; --heading: #16191c; --text: #3b4247; --muted: #7d858a;
  --sp-amber: #e79215; --sp-line: #cfd3d5; --sp-slate: #14181b;
  --hero-a: rgba(14, 18, 21, .32); --hero-b: rgba(14, 18, 21, .68);
}

/* the bone runs unbroken from the stage to the footer — no alternating wash */
body.t-spoor.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }

/* every hardcoded grey in the shared sheet re-pointed at the token, so the night block actually moves the page */
body.t-spoor .ws-sub, body.t-spoor .ws-feature p, body.t-spoor .ws-col p, body.t-spoor .ws-story-copy p, body.t-spoor .ws-quote blockquote, body.t-spoor .ws-plan li { color: var(--text); }

/* first full-width moment: the whole screen, and nothing on it but a headline and one slab */
body.t-spoor .ws-hero { min-height: 100vh; background-color: var(--sp-slate); }
body.t-spoor .ws-hero h1 { font-size: clamp(34px, 6.1vw, 66px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; max-width: 21ch; }

/* buttons are flat graphite slabs by default — the amber is rationed below */
body.t-spoor.ws-body .btn.brand { background: var(--sp-slate); color: #f3f1ec; border-radius: 2px; padding: 14px 28px; font-size: 13.5px; font-weight: 650; letter-spacing: .03em; }
body.t-spoor.ws-body .ws-hero-cta.btn.brand, body.t-spoor.ws-body .ws-contact .ws-form > .btn.brand { background: var(--sp-amber); color: #14181b; }

/* THE WELD — no top padding, so the steel rule lands on the photograph's edge */
body.t-spoor .ws-features { padding: 0 0 68px; }

/* one rule for all three four-across bands: glyphs, operators, tiers */
body.t-spoor .ws-features-grid, body.t-spoor .ws-columns .ws-cols-4, body.t-spoor .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: none; margin: 0; }
body.t-spoor .ws-feature, body.t-spoor .ws-col, body.t-spoor .ws-plan { display: flex; flex-direction: column; text-align: left; background: transparent; border: 0; border-top: 2px solid var(--sp-line); border-radius: 0; box-shadow: none; padding: 20px 30px 30px 0; }

/* the one amber cap on the page */
body.t-spoor .ws-pricing-grid .ws-plan:nth-child(3) { border-top-color: var(--sp-amber); border-top-width: 5px; }
body.t-spoor .ws-plan li { border-bottom: 1px solid var(--sp-line); padding: 9px 0; font-size: 14px; }
body.t-spoor .ws-plan li::before, body.t-spoor .ws-quote blockquote::before { content: none; }

/* two mirrored rungs, same measure, each closed by the same hairline */
body.t-spoor .ws-story-grid { gap: 54px; align-items: start; padding-bottom: 34px; border-bottom: 1px solid var(--sp-line); }
body.t-spoor .ws-story-media img { border-radius: 2px; aspect-ratio: 5 / 4; }

/* quotes sit on the bone with no card, each behind a small round portrait */
body.t-spoor .ws-quote { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
body.t-spoor .ws-testimonials-grid .ws-quote:nth-child(1)::before { content: ''; display: block; width: 58px; height: 58px; border-radius: 50%; margin-bottom: 20px; background: var(--sp-line) url("/media/samples/spo_face_ops.jpg") center / cover; }
body.t-spoor .ws-testimonials-grid .ws-quote:nth-child(2)::before { content: ''; display: block; width: 58px; height: 58px; border-radius: 50%; margin-bottom: 20px; background: var(--sp-line) url("/media/samples/spo_face_owner.jpg") center / cover; }

/* six fields two per row, and the depot lines land BELOW the form */
body.t-spoor .ws-contact .ws-narrow { max-width: 880px; display: flex; flex-direction: column; }
body.t-spoor .ws-contact .ws-sub { order: 2; margin: 34px 0 0; white-space: pre-line; color: var(--heading); font-size: 14.5px; }
body.t-spoor .ws-contact .ws-form { max-width: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; align-items: start; }
body.t-spoor .ws-contact .ws-form > .btn.brand { grid-column: 1 / -1; justify-self: start; }
body.t-spoor .ws-field input, body.t-spoor .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--sp-line); border-radius: 0; color: var(--heading); padding: 10px 2px; }

/* second full-width moment: the page closes dark, the way it opened */
body.t-spoor .ws-footer { background: var(--sp-slate); color: #868d93; border-top: 0; padding: 46px 0; }

/* every four-across band folds to two, so each still fills its rows */
@media (max-width: 900px) {
  body.t-spoor .ws-features-grid, body.t-spoor .ws-columns .ws-cols-4, body.t-spoor .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-spoor .ws-contact .ws-form { grid-template-columns: 1fr; }
}

/* night — the cold morning becomes a cold night: the bone drops to gunmetal,
   the steel hairline darkens so it still reads as a rule rather than a glare,
   and the amber lifts a shade so the three signal moments keep their weight */
html[data-theme="dark"] body.t-spoor.ws-body {
  --bg: #101315; --fg: #c6ccd0; --heading: #eef1f2; --text: #a9b1b6; --muted: #7b8388;
  --sp-amber: #f0a12c; --sp-line: #2c3336; --sp-slate: #07090a;
  --hero-a: rgba(6, 8, 9, .38); --hero-b: rgba(6, 8, 9, .74);
}