/* The Labor productivity page, from the 2026-11-03 handoff. Loaded after
   home.css and pages.css. */
.labor-page h2 { font-size: 36px; }
.lp-hero { padding-block: 72px 0; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.lp-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.lp-hero-visual { position: relative; padding: 0 110px 56px 0; }
/* The summary screenshot is a wide strip; a fixed card height shows more of it without widening it. */
.lp-hero-visual .screen-card { height: 340px; }
.lp-hero-visual .screen-card img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.lp-hero + .proof { margin-top: 64px; }
.lp-hero-phone { position: absolute; right: -20px; bottom: -10px; width: 230px; height: auto; filter: drop-shadow(0 20px 30px rgba(18, 43, 67, .3)); }
.lp-hero-visual .live-badge { top: -14px; left: 16px; }
.lp-hero-note { position: absolute; left: 0; bottom: 18px; font-size: 13.5px; color: var(--muted); }
.live-badge { position: absolute; display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--navy); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2F8F4E; }
.phone-frame { overflow: hidden; background: var(--navy-deep); border: 7px solid var(--navy-deep); border-radius: 32px; }

/* The problem */
/* The problem: set like a magazine spread. A pull quote and a two-column
   body on the left, a ruled stat sidebar on the right. */
.lp-problem { margin-top: 0; padding-block: 88px; background: var(--cream); border-top: 1px solid var(--line); }
.lp-problem-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.lp-pull { position: relative; margin: 0; padding: 44px 0 0 40px; border-left: 3px solid var(--accent); }
.lp-pull-mark { position: absolute; left: 36px; top: -4px; font-size: 96px; font-weight: 800; line-height: 1; color: var(--accent); opacity: .9; }
.lp-problem h2 { max-width: 20ch; font-size: 40px; line-height: 1.12; letter-spacing: -.02em; }
.lp-article-body { max-width: 62ch; margin-top: 32px; font-size: 17px; line-height: 1.7; color: var(--body); }
.lp-callout { align-self: center; padding: 28px 32px 30px; background: var(--navy); border-radius: 8px; color: var(--white); }
.lp-callout-lead { font-size: 17px; font-weight: 700; line-height: 1.4; }
.lp-callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); }
.lp-stat { padding-left: 16px; border-left: 4px solid; }
.lp-stat.is-orange { border-color: var(--accent); }
.lp-stat.is-blue { border-color: #2D9FC1; }
.lp-stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--on-navy); text-transform: uppercase; }
.lp-stat-value { margin-top: 6px; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.lp-stat-note { margin-top: 4px; font-size: 14px; color: var(--on-navy); }

/* When do you find out? */
.lp-when { position: relative; padding-block: 120px 0; text-align: center; }
/* The same short centered hairline the homepage uses between sections. */
.lp-when::before, .lp-how::before { content: ""; position: absolute; top: 40px; left: 50%; width: min(320px, 60%); height: 1px; background: linear-gradient(90deg, transparent, #CFC9BC 25%, #CFC9BC 75%, transparent); transform: translateX(-50%); }
/* The chart: lost hours climbing day by day through the job's first month,
   with the three ways of finding out called out where they land on the line.
   The line draws in once on view and each callout's hours count up. */
.lp-chart { margin: 48px 0 0; text-align: left; }
.lp-chart-panel { padding: 26px 28px 20px; background: var(--white); border-radius: 18px; box-shadow: 0 1px 2px rgba(18, 43, 67, .06), 0 24px 60px rgba(18, 43, 67, .10); }
.lp-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lp-chart-title { font-size: 14px; font-weight: 700; color: var(--muted); }
.lp-chart-sub { margin-left: 8px; font-weight: 500; color: var(--muted); opacity: .8; }
.lp-chart-big { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.lp-chart-num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--navy); }
.lp-chart-unit { font-size: 18px; font-weight: 700; color: var(--navy); }
.lp-chart-when { margin-left: 8px; padding: 4px 10px; background: #FDEDE3; border-radius: 999px; font-size: 13px; font-weight: 700; color: #D9692F; }
.lp-chart-big.is-win .lp-chart-when { background: #E3F3F8; color: #1F7E9C; }
.lp-chart-range { flex: none; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--navy); }
.lp-chart-svg { display: block; width: 100%; height: auto; margin-top: 22px; overflow: visible; font-family: inherit; }
.lp-chart-grid line { stroke: #EEECE6; stroke-width: 1; }
.lp-chart-grid text { font-size: 11.5px; font-weight: 600; fill: #9AA3AD; }
.lp-chart-area { fill: url(#lp-area); opacity: 0; }
.lp-chart-line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lp-mark line { stroke: #DCD8CE; stroke-width: 1; stroke-dasharray: 3 5; }
.lp-mark circle { fill: var(--white); stroke: var(--accent); stroke-width: 2.5; }
.lp-tip { fill: var(--navy); }
.lp-tip-val { font-size: 12px; font-weight: 700; fill: var(--white); }
.lp-mark.is-win line { stroke: #2D9FC1; stroke-dasharray: none; stroke-width: 1.25; opacity: .6; }
.lp-mark.is-win circle { stroke: #2D9FC1; }
.lp-mark.is-win .lp-tip { fill: #2D9FC1; }
.lp-mark.is-win circle { r: 6; stroke-width: 3; }
.lp-mark.is-win .lp-tip-val { font-size: 12.5px; }
.lp-chart-axis text { font-size: 11.5px; font-weight: 600; fill: #9AA3AD; }
/* Hidden until the line reaches each one. */
.lp-mark { opacity: 0; transform: translateY(6px); }
.lp-chart.is-done .lp-chart-line, .lp-chart.is-live .lp-chart-line { stroke-dashoffset: 0; }
.lp-chart.is-live .lp-chart-line { transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .6, 1); }
.lp-chart.is-done .lp-chart-area, .lp-chart.is-live .lp-chart-area { opacity: 1; transition: opacity 1.2s ease-out 1.2s; }
.lp-mark.is-on { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .4s cubic-bezier(.3, 1.4, .5, 1); }
/* Hover: a cursor rides the line with a live readout; the fixed labels step back. */
.lp-hit { cursor: crosshair; }
.lp-live { opacity: 0; transition: opacity .15s; pointer-events: none; }
.lp-chart.is-hover .lp-live { opacity: 1; }
.lp-chart.is-hover .lp-mark { opacity: .18; transition: opacity .2s; }
.lp-live-cursor { stroke: var(--navy); stroke-width: 1; opacity: .5; }
.lp-live-dot { fill: var(--accent); stroke: var(--white); stroke-width: 3; filter: drop-shadow(0 2px 6px rgba(18, 43, 67, .3)); }
.lp-live-halo { fill: var(--accent); opacity: .18; }
.lp-live-tip { fill: var(--navy); }
.lp-live-day { font-size: 12px; font-weight: 600; fill: var(--on-navy); }
.lp-live-val { font-size: 17px; font-weight: 800; letter-spacing: -.01em; fill: var(--white); }
.lp-live-note { font-size: 12px; font-weight: 600; fill: #8FD3E2; }
.lp-live.is-win .lp-live-tip { fill: #2D9FC1; }
.lp-live.is-win .lp-live-dot, .lp-live.is-win .lp-live-halo { fill: #2D9FC1; }
.lp-live.is-win .lp-live-cursor { stroke: #2D9FC1; }
.lp-live.is-win .lp-live-day, .lp-live.is-win .lp-live-note { fill: rgba(255, 255, 255, .88); }
/* The legend lives inside the card. Hovering an item moves the chart cursor to its day. */
.lp-chart-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 8px -28px -20px; padding: 0 12px 4px; border-top: 1px solid var(--line); }
.lp-chart-legend button { position: relative; padding: 20px 16px 22px 34px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: default; border-radius: 12px; transition: background .2s; }
.lp-chart-legend button + button { border-left: 1px solid var(--line); border-radius: 0; }
.lp-chart-legend button:hover, .lp-chart-legend button:focus-visible, .lp-chart-legend button.is-active { background: #FBF9F4; }
.lp-chart-legend button:focus-visible { outline: 2px solid #2D9FC1; outline-offset: -2px; }
.lp-legend-dot { position: absolute; left: 16px; top: 24px; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px #FDEDE3; }
.lp-chart-legend .is-win .lp-legend-dot { background: #2D9FC1; box-shadow: 0 0 0 3px #E3F3F8; }
.lp-chart-legend strong { display: block; font-size: 15px; color: var(--navy); }
.lp-legend-when { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lp-chart-legend p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--body); }

/* How it works: a pinned stage. Scrolling through the track advances the step;
   the visual and the copy slide up as they change, the rail marks the step. */
.lp-how { position: relative; margin-top: 96px; padding-block: 120px 140px; background: linear-gradient(to bottom, var(--cream) 0, #EAF4F8 200px, #EAF4F8 calc(100% - 200px), var(--cream) 100%); }
.lp-how-head { text-align: center; }
.lp-how .section-sub { max-width: 640px; margin: 12px auto 0; }
.lp-track { height: 400vh; margin-top: 24px; }
.lp-stage { position: sticky; --stage-h: clamp(560px, calc(100vh - var(--nav) - 140px), 780px); top: calc(var(--nav) + max(0px, (100vh - var(--nav) - var(--stage-h)) / 2)); display: grid; grid-template-columns: 220px minmax(0, 1.55fr) minmax(0, .85fr); gap: 40px; align-items: stretch; height: var(--stage-h); padding-block: 24px; }
.lp-rail { display: flex; flex-direction: column; }
.lp-rail-title { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.lp-rail-cta { align-self: flex-start; margin-top: 20px; padding-inline: 20px; font-size: 15px; white-space: nowrap; }
.lp-rail-list { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 24px; list-style: none; padding: 0; }
.lp-rail-list button { position: relative; padding: 4px 0 4px 16px; border: 0; background: none; color: var(--muted); font: 500 14px Manrope, system-ui, sans-serif; text-align: left; cursor: pointer; transition: color .25s; }
.lp-rail-list button::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; opacity: 0; transform: translateY(-50%) scale(.5); transition: opacity .25s, transform .25s; }
.lp-rail-list button.is-active { color: var(--navy); font-weight: 700; }
.lp-rail-list button.is-active::before { opacity: 1; transform: translateY(-50%) scale(1); }
.lp-visuals { position: relative; }
.lp-visual { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; border-radius: 8px; opacity: 0; transform: translateY(40px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.lp-visual.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lp-visual.is-leaving { opacity: 0; transform: translateY(-40px); }
.lp-visual { background: transparent; }
.lp-visual-fill { padding: 0; overflow: hidden; }
.lp-visual .lp-shot-fill { position: absolute; left: 0; top: 50%; width: 100%; height: auto; max-width: none; transform: translateY(-50%); border-radius: 8px; box-shadow: none; }
/* A small capture stays at its own size rather than being blown up. */
.lp-visual .lp-shot-natural { left: 50%; width: auto; max-width: 100%; transform: translate(-50%, -50%); }
.lp-shot { width: 100%; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); }
.lp-step-phone { overflow: hidden; padding: 0; }
/* The phone is bigger than the box and sits off center, so the box masks it. */
.lp-step-iphone { position: absolute; left: 22%; top: 5%; width: 76%; max-width: 480px; height: auto; }
.lp-adds { min-width: 0; }
.lp-adds-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: #8FD3E2; text-transform: uppercase; }
.lp-adds ol { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; list-style: none; padding: 0; }
.lp-adds li { display: flex; gap: 12px; align-items: flex-start; }
.lp-adds li > span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; background: #2D9FC1; border-radius: 50%; font-size: 13px; font-weight: 800; }
.lp-adds li div { font-size: 13.5px; line-height: 1.45; color: var(--on-navy); }
.lp-adds strong { display: block; font-size: 15px; color: var(--white); }
.lp-adds-close { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; font-weight: 700; }
.lp-copies { position: relative; }
.lp-copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0; transform: translateY(32px); transition: opacity .45s ease, transform .45s ease;  pointer-events: none; }
.lp-copy.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lp-copy.is-leaving { opacity: 0; transform: translateY(-32px); }
.lp-copy h3 { font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.lp-copy p { font-size: 16px; line-height: 1.6; color: var(--body); }
.lp-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; list-style: none; padding: 0; }
.lp-checks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--body); }
.lp-checks li strong { color: var(--navy); }
.lp-checks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 12px; border: solid var(--navy); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }
.lp-checks-close { font-weight: 700; color: var(--navy) !important; }

.lp-visual.is-entering, .lp-copy.is-entering { opacity: 0; transform: translateY(40px); }
/* Reduced motion: the same stacked layout phones get. */
.pace-static .lp-track { height: auto; }
.pace-static .lp-stage { position: static; display: flex; flex-direction: column; gap: 24px; height: auto; }
.pace-static .lp-rail { display: none; }
.pace-static .lp-visuals, .pace-static .lp-copies { position: static; height: auto; min-height: 0; display: contents; }
.pace-static .lp-visual, .pace-static .lp-copy { position: static; opacity: 1; transform: none; pointer-events: auto; }
.pace-static .lp-visual .lp-shot-fill { position: static; transform: none; width: 100%; height: auto; }
.pace-static .lp-visual:nth-child(1) { order: 1; } .pace-static .lp-copy:nth-child(1) { order: 2; }
.pace-static .lp-visual:nth-child(2) { order: 3; } .pace-static .lp-copy:nth-child(2) { order: 4; }
.pace-static .lp-visual:nth-child(3) { order: 5; } .pace-static .lp-copy:nth-child(3) { order: 6; }
.pace-static .lp-visual:nth-child(4) { order: 7; } .pace-static .lp-copy:nth-child(4) { order: 8; }

/* Step 2 graphic */
.lp-budget { width: 100%; max-width: 420px; padding: 24px 26px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 16px 40px rgba(18, 43, 67, .12); }
.lp-budget-head p:first-child { font-size: 17px; font-weight: 800; }
.lp-budget-head p + p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.lp-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.lp-bar { display: grid; grid-template-columns: 72px minmax(0, 1fr) 60px; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--body); }
.lp-bar strong { font-size: 14px; text-align: right; color: var(--navy); }
.lp-bar-track { display: flex; height: 14px; overflow: hidden; background: var(--sand-deep); border-radius: 999px; }
.lp-bar-fill { width: var(--w); background: var(--navy); }
.lp-bar-over { width: var(--w); background: var(--accent); }
.lp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.lp-tile { padding: 14px 16px; background: var(--sand); border-radius: 12px; }
.lp-tile.is-orange { background: #FCE8DA; }
.lp-tile p:first-child { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.lp-tile.is-orange p:first-child { color: #C2571B; }
.lp-tile p + p { margin-top: 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.lp-budget-note { margin-top: 16px; font-size: 12px; color: var(--muted); }

/* Mid-page CTA, founder, connects */
.lp-mid { padding-block: 24px 96px; }
.lp-founder { padding-block: 80px; background: var(--navy); color: var(--white); }
.lp-founder-grid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 32px; align-items: center; max-width: 980px; }
.lp-founder img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.lp-founder blockquote { font-size: 20px; line-height: 1.6; }
.lp-founder blockquote strong { color: #8FD3E2; }
.lp-founder-name { margin-top: 16px; font-size: 14px; color: var(--on-navy); }
.lp-founder-name strong { color: var(--white); }
.lp-connects { padding-block: 96px; }
.lp-connects h2 { margin-bottom: 36px; text-align: center; }
.labor-page .explore-link span { color: var(--teal); }
.lp-closing { padding-block: 72px 88px; background: var(--navy); color: var(--white); }
.lp-closing h2 { max-width: 20ch; color: var(--white); }
.lp-closing p { margin: 14px 0 26px; font-size: 18px; color: var(--on-navy); }

@media (max-width: 960px) {
  .lp-hero-grid, .lp-problem-grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-hero-visual { padding-right: 110px; }
  .lp-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-rail { display: none; }
  .lp-chart-panel { padding: 18px 16px 12px; }
  .lp-chart-range { display: none; }
  .lp-chart-num { font-size: 32px; }
  .lp-mark text, .lp-mark .lp-tip, .lp-live, .lp-hit { display: none; }
  .lp-chart-axis text, .lp-chart-grid text { font-size: 24px; }
  .lp-chart-legend { grid-template-columns: 1fr; margin: 6px -16px -12px; padding: 0 4px; }
  .lp-chart-legend button + button { border-left: 0; border-top: 1px solid var(--line); }
  .lp-chart-legend button { padding: 16px 12px 18px 32px; }
}
@media (max-width: 720px) {
  .labor-page h2, .lp-problem h2 { font-size: 28px; }
  .lp-hero { padding-top: 40px; }
  .lp-hero-visual { margin-top: 8px; padding: 24px 0 0 0; }
  .lp-hero-visual .screen-card { height: 220px; }
  .lp-hero-phone { position: static; width: 170px; margin: -80px -10px 0 auto; }
  .lp-hero-note { position: static; margin-top: 16px; }
  .lp-problem { margin-top: 48px; padding-block: 56px; }
  .lp-problem h2 { font-size: 30px; }
  .lp-pull { padding: 36px 0 0 24px; }
  .lp-pull-mark { left: 22px; top: -2px; font-size: 72px; }
  .lp-callout { padding: 24px; }
  .lp-callout-grid { grid-template-columns: 1fr; gap: 18px; }
  .lp-when { padding-top: 64px; }
  .lp-how { margin-top: 72px; padding-block: 56px; }
  /* Phones: no pinning. The four steps stack as plain cards. */
  .lp-track { height: auto; }
  .lp-stage { position: static; display: flex; flex-direction: column; gap: 24px; height: auto; padding-block: 24px 0; }
  .lp-visuals, .lp-copies { position: static; height: auto; min-height: 0; }
  .lp-visual, .lp-copy { position: static; opacity: 1; transform: none; pointer-events: auto; }
  /* Stacked: a filled visual takes its image's own height instead of floating. */
  .lp-visual .lp-shot-fill { position: static; transform: none; width: 100%; height: auto; }
  .lp-visual-fill { padding: 0; overflow: visible; }
  .lp-visual { padding: 24px; }
  .lp-visual.is-leaving, .lp-copy.is-leaving { opacity: 1; transform: none; }
  .lp-step-phone { height: 360px; }
  .lp-step-iphone { left: 50%; top: 10%; width: 62%; max-width: 240px; transform: translateX(-40%); }
  .lp-copies { display: contents; }
  .lp-visuals { display: contents; }
  .lp-stage > .lp-visuals > .lp-visual:nth-child(1) { order: 1; } .lp-stage > .lp-copies > .lp-copy:nth-child(1) { order: 2; }
  .lp-stage > .lp-visuals > .lp-visual:nth-child(2) { order: 3; } .lp-stage > .lp-copies > .lp-copy:nth-child(2) { order: 4; }
  .lp-stage > .lp-visuals > .lp-visual:nth-child(3) { order: 5; } .lp-stage > .lp-copies > .lp-copy:nth-child(3) { order: 6; }
  .lp-stage > .lp-visuals > .lp-visual:nth-child(4) { order: 7; } .lp-stage > .lp-copies > .lp-copy:nth-child(4) { order: 8; }
  .lp-copy { gap: 10px; padding-bottom: 16px; }
  .lp-mid { padding-block: 48px 64px; }
  .lp-founder-grid { grid-template-columns: 1fr; }
  .lp-closing h2 { max-width: none; }
}
.hero-cred-space { height: 69px; }
@media (max-width: 720px) { .hero-cred-space { height: 88px; } }
/* A fixed break in the pricing heading on wide screens; phones wrap naturally. */
.lp-br { display: inline; }
@media (max-width: 720px) { .lp-br { display: none; } }