/* WorkPro — product pages.
   ---------------------------------------------------------------------------
   Kept in a file on purpose: the site's `_headers` sets style-src 'self', so an
   inline <style> block or a style="" attribute is refused by the browser and
   silently does nothing. The same policy blocks scripts outright, so everything
   here is CSS-only by necessity — and, as it turns out, by preference.

   The palette is the app's, and it means what it means there: green is on site,
   amber is moving or needs a decision, red is off site — the thing that costs
   money if nobody looks. The page's own neutrals carry a slight blue bias so
   they sit under those colours rather than fighting them, and nothing else on
   the page is allowed to be saturated. */

:root {
  /* Neutrals, biased a few degrees toward the accent so they read as chosen. */
  --ground: #f4f6fa;
  --raise: #ffffff;
  --sink: #e8edf5;
  --line: #e2e6ee;
  --rule: #ccd4e0;

  --ink: #0b0d12;
  --ink-2: #3e4757;
  --muted: #7a8496;

  --accent: #14306f;
  --accent-ink: #ffffff;
  --deep: #14306f;

  --good: #1c8a4e;
  --warn: #a86a05;
  --bad: #c1323b;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, .05), 0 20px 44px -26px rgba(20, 45, 85, .35);
  --shadow-3: 0 30px 80px -34px rgba(20, 45, 85, .55);

  --radius: 18px;
  --radius-lg: 24px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0b0d12;
    --raise: #12151d;
    --sink: #171b25;
    --line: #222836;
    --rule: #2b3242;

    --ink: #edeff3;
    --ink-2: #c3cad6;
    --muted: #98a1b2;

    --accent: #6fa6e4;
    --accent-ink: #0b0d12;
    --deep: #6fa6e4;

    --good: #4ec984;
    --warn: #e0a33c;
    --bad: #ef6b72;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 48px -26px rgba(0, 0, 0, .85);
    --shadow-3: 0 34px 90px -34px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #0b0d12;
  --raise: #12151d;
  --sink: #171b25;
  --line: #222836;
  --rule: #2b3242;
  --ink: #edeff3;
  --ink-2: #c3cad6;
  --muted: #98a1b2;
  --accent: #6fa6e4;
  --accent-ink: #0b0d12;
  --deep: #6fa6e4;
  --good: #4ec984;
  --warn: #e0a33c;
  --bad: #ef6b72;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 48px -26px rgba(0, 0, 0, .85);
  --shadow-3: 0 34px 90px -34px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  padding: 0 22px 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.62 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1000px; margin: 0 auto; }

/* The data face. Timestamps, durations, rates, counts — anything a decision is
   read off gets tabular figures so columns line up and nothing shifts. */
.mono {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 18px; border-radius: 0 0 12px 0; font-weight: 640; z-index: 10;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1 {
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 14px 0 16px;
  text-wrap: balance;
}
h2 {
  font-size: clamp(24px, 3.6vw, 33px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 760;
  margin: 0 0 12px;
  text-wrap: balance;
}
h3 { font-size: 18px; letter-spacing: -0.012em; font-weight: 700; margin: 0 0 6px; }
p { margin: 0 0 13px; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.48;
  color: var(--ink-2);
  max-width: 34em;
}
.quiet { color: var(--muted); }
.small { font-size: 15px; }

.label {
  display: inline-block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px; padding: 5px 13px;
}
.pill.plain {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-color: var(--line);
}

.cta {
  display: inline-block;
  background: var(--deep); color: #fff;
  text-decoration: none; font-weight: 680; font-size: 16.5px;
  padding: 14px 26px; border-radius: 13px;
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--deep) 85%, transparent);
  transition: transform .15s ease, filter .15s ease;
}
.cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cta.ghost {
  background: transparent; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Structure
   -------------------------------------------------------------------------- */

.top { padding: 26px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; font-size: 16.5px; letter-spacing: -0.012em;
}
.mark svg { display: block; border-radius: 9px; }
.mark strong { font-weight: 700; }
.topnav { display: flex; gap: 20px; }
.topnav a { font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--muted); }
.topnav a:hover { color: var(--ink); }
@media (max-width: 560px) { .topnav { display: none; } }

section { padding: 54px 0; }
section + section { border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; max-width: 40em; }

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

.hero {
  display: grid; grid-template-columns: 1fr 236px; gap: 52px; align-items: center;
  padding: 42px 0 56px; border-top: 0;
}
.hero-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; }

/* The legend. Stated once, up front, because every screenshot below depends on
   knowing it and it is the first thing a foreman learns in the app. */
.legend {
  margin-top: 24px; padding: 14px 18px; border-radius: var(--radius);
  background: var(--raise); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  display: flex; flex-wrap: wrap; gap: 6px 22px;
}
.legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 560; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.on { background: var(--good); }
.dot.moving { background: var(--warn); }
.dot.off { background: var(--bad); }
.dot.unknown { background: var(--muted); }

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

.phone {
  justify-self: center; width: 100%; max-width: 236px; padding: 9px 9px 0;
  background: color-mix(in srgb, var(--ink) 88%, #000);
  border-radius: 38px 38px 9px 9px;
  box-shadow: var(--shadow-3);
  border: 1px solid rgba(255, 255, 255, .07);
  align-self: start;
}
.phone img {
  display: block; width: 100%; height: 500px;
  object-fit: cover; object-position: top center;
  border-radius: 30px 30px 0 0;
  background: var(--sink);
}
.feature .phone { max-width: 210px; }
.feature .phone img { height: 380px; }

/* --------------------------------------------------------------------------
   A day, told against the clock
   ---------------------------------------------------------------------------
   The one structural device on this page, and it earns its place: a day *is* a
   sequence, so the timestamps are information rather than decoration. The rule
   down the left is the route line from the app, and each dot carries the same
   meaning it does on the map. */

.day { list-style: none; margin: 0; padding: 0; position: relative; }
.day::before {
  content: ""; position: absolute; left: 79px; top: 14px; bottom: 14px;
  width: 2px; background: var(--rule); border-radius: 2px;
}
.day li {
  display: grid; grid-template-columns: 62px 34px 1fr; align-items: start;
  gap: 0 14px; padding: 13px 0;
}
.day .t { color: var(--muted); font-size: 14px; padding-top: 2px; text-align: right; }
.day .pip { position: relative; width: 34px; height: 24px; }
.day .pip::after {
  content: ""; position: absolute; left: 8px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px var(--ground);
}
.day li.on .pip::after { background: var(--good); }
.day li.moving .pip::after { background: var(--warn); }
.day li.off .pip::after { background: var(--bad); }
.day li.think .pip::after {
  background: var(--raise); border: 2px solid var(--accent); width: 14px; height: 14px;
  left: 7px; top: 5px;
}
.day .what { min-width: 0; }
.day .what strong { font-weight: 680; }
.day .what p { color: var(--muted); font-size: 15px; margin: 3px 0 0; }
.day .dur { color: var(--ink-2); font-weight: 640; }

@media (max-width: 620px) {
  .day::before { left: 17px; }
  .day li { grid-template-columns: 34px 1fr; gap: 0 12px; }
  .day .t { grid-column: 2; text-align: left; font-size: 13px; padding: 0 0 2px; }
  .day .pip { grid-row: 1 / span 2; }
  .day .what { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Feature rows
   -------------------------------------------------------------------------- */

.feature {
  display: grid; grid-template-columns: 210px 1fr; gap: 46px; align-items: center;
  padding: 34px 0;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip { grid-template-columns: 1fr 210px; }
.feature.flip .phone { order: 2; }
.feature .body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.feature .body p { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 6px;
}
.card p { color: var(--muted); font-size: 15.5px; line-height: 1.5; margin: 0; }
.card .label { margin-bottom: 4px; }

.block {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-2);
}
.block ul { padding-left: 20px; margin: 10px 0 0; }
.block li { margin: 8px 0; }
.block li::marker { color: var(--accent); }

/* The closing call, given weight without a gradient. */
.finale {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Questions — <details> so it works with no script at all
   -------------------------------------------------------------------------- */

.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-weight: 660; font-size: 17px; letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.qa details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa .answer { padding: 0 0 20px; color: var(--ink-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Prose (privacy, support)
   -------------------------------------------------------------------------- */

.page-head { padding: 34px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.prose h2 { margin: 30px 0 8px; font-size: 23px; }
.prose h2:first-child { margin-top: 0; }
.prose strong { font-weight: 680; }
.prose ul { padding-left: 20px; }
.prose li { margin: 7px 0; }
.prose li::marker { color: var(--accent); }

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

.foot {
  border-top: 1px solid var(--line); margin-top: 20px;
  padding: 40px 0 60px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px;
}
.foot h4 {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot a { text-decoration: none; font-size: 15px; color: var(--ink-2); }
.foot a:hover { color: var(--accent); }
.foot .about { color: var(--muted); font-size: 14.5px; max-width: 30em; }
.foot .about .mark { margin-bottom: 10px; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 30px; }
  .hero .phone { max-width: 224px; justify-self: start; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 22px; }
  .feature .phone, .feature.flip .phone { order: 0; max-width: 210px; justify-self: start; }
  .grid, .grid.three { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot .about { grid-column: 1 / -1; }
  .finale { padding: 28px; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; }
  .phone, .cta, .topnav, .skip { display: none; }
  section { padding: 18px 0; border: 0; }
}