/* =========================================================================
   lyft.warren.digital · Staff Design Program Manager, Design Foundations
   Lyft-evocative, logo-free: near-black ink, white, one pink accent.
   No inline styles anywhere (CSP style-src 'self', font-src 'self').
   ========================================================================= */

/* ---------- fonts, self-hosted ----------
   One variable file per subset, latin and latin-ext only. Nothing on this page
   loads from a third-party host, so a blocked or slow font CDN cannot hold up
   first paint. */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  --ink:#0C0B31;          /* near-black Lyft-family ink */
  --ink-deep:#08071F;
  --ink-panel:#191842;
  --paper:#FFFFFF;
  --paper-warm:#F1EFF8;   /* section ground: a real step off white, not 8 RGB units */
  --card:#FFFFFF;         /* card fill, so a card on a tinted section reads as a card */
  --line:#E5E3F0;
  --line-ink:rgba(255,255,255,.14);
  --text:#232149;
  --muted:#5B5975;
  --muted-ink:#A9A7C9;
  --pink:#FF00BF;         /* accent only; AA on ink, not on white as text */
  --pink-text:#C7009B;    /* darkened magenta, AA on white for text */
  --pink-soft:#FFE9F9;
  --ok-text:#0A7A42;
  --ok-bg:#E6F5ED;
  --warn-text:#8A5A00;
  --warn-bg:#FFF1DC;
  --over:#C01313;
  --over-bg:#FDEAEA;
  --radius-sm:12px;
  --radius:20px;
  --radius-lg:28px;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.21,1);
  --wrap:1120px;
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; font-family:var(--font); font-size:16.5px; line-height:1.6;
  color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:var(--pink-text)}
a:hover{text-decoration-thickness:2px}
b,strong{font-weight:700; color:inherit}
:focus-visible{outline:3px solid var(--pink); outline-offset:3px; border-radius:4px}
.lf-sec-ink :focus-visible, .lf-hero :focus-visible{outline-color:#fff}
::selection{background:var(--pink-soft); color:var(--ink)}

.lf-wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.lf-measure{max-width:62ch}

/* ---------- type scale ---------- */
.lf-h1{font-size:clamp(34px,5vw,56px); line-height:1.08; font-weight:800;
  letter-spacing:-0.02em; margin:14px 0 20px; color:#fff}
.lf-h2{font-size:clamp(26px,3.4vw,38px); line-height:1.15; font-weight:800;
  letter-spacing:-0.015em; margin:10px 0 16px; color:var(--ink)}
.lf-sec-ink .lf-h2{color:#fff}
.lf-h3{font-size:clamp(21px,2.4vw,26px); line-height:1.25; font-weight:800; margin:0 0 10px; color:var(--ink)}
.lf-h4{font-size:19px; line-height:1.3; font-weight:800; margin:0; color:var(--ink)}
.lf-h5{font-size:17px; line-height:1.35; font-weight:800; margin:0; color:var(--ink)}
.lf-kick{font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pink-text); margin:0}
.lf-kick-pink{color:var(--pink)}
.lf-lead{font-size:clamp(17px,2vw,19.5px); line-height:1.55; margin:0 0 14px}
.lf-hero .lf-lead{color:#EDEBFA}
.lf-lead-2{font-size:16.5px; color:var(--muted-ink)}

/* ---------- private-link bar ---------- */
.lf-banner{background:var(--ink-deep); color:var(--muted-ink);
  border-bottom:1px solid var(--line-ink); font-size:13px}
.lf-banner p{margin:0; padding:9px 0; line-height:1.45}
.lf-banner strong{color:#fff; font-weight:700}

/* ---------- skip link ---------- */
.lf-skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--pink);
  color:var(--ink); font-weight:800; padding:12px 20px; border-radius:0 0 var(--radius-sm) 0}
.lf-skip:focus{left:0}

/* ---------- nav ---------- */
.lf-nav{position:sticky; top:0; z-index:50; background:rgba(12,11,49,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line-ink)}
.lf-nav-inner{display:flex; align-items:center; gap:22px; min-height:60px}
.lf-logo{font-weight:800; font-size:17px; color:#fff; text-decoration:none; letter-spacing:-.01em}
.lf-logo span{color:var(--pink)}
.lf-nav nav{margin-left:auto}
.lf-nav-links{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.lf-nav-links a{display:block; padding:8px 12px; border-radius:999px; font-size:14.5px;
  font-weight:600; color:#EDEBFA; text-decoration:none}
.lf-nav-links a:hover{background:rgba(255,255,255,.1); color:#fff}
/* L13: below 840 the section list becomes a scrollable chip rail instead of
   disappearing, so the sticky bar earns the 60px it rents on every screen */
/* bottom corners squared so the inset rule reads as an underline, not a smile */
.lf-nav-links a[aria-current]{color:#fff; border-radius:999px 999px 2px 2px;
  box-shadow:inset 0 -2px 0 var(--pink)}
@media (max-width:840px){
  .lf-nav-inner{flex-wrap:wrap; row-gap:6px}
  /* min-width:0 matters: the rail lives one level inside this flex item, so
     without it the item floors at the rail's min-content width and the page
     scrolls sideways */
  .lf-nav nav{flex:1 0 100%; order:3; margin-left:0; min-width:0}
  .lf-nav-links{min-width:0}
  .lf-nav-inner .lf-btn-sm{margin-left:auto}
  .lf-nav-links{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; margin:0 -24px 2px; padding:2px 24px 6px;
    scroll-snap-type:x proximity}
  .lf-nav-links::-webkit-scrollbar{display:none}
  .lf-nav-links li{flex:0 0 auto; scroll-snap-align:start}
  .lf-nav-links a{padding:10px 12px; white-space:nowrap}
}
/* anchors clear the sticky bar; the rail makes it taller below 840 */
section[id], div[id], :target{scroll-margin-top:74px}
@media (max-width:840px){ section[id], div[id], :target{scroll-margin-top:118px} }

/* ---------- buttons ---------- */
.lf-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--pink); color:var(--ink); font-weight:800; font-size:15.5px;
  padding:13px 24px; border-radius:999px; text-decoration:none;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.lf-btn:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,0,191,.28)}
.lf-btn-ghost{background:transparent; box-shadow:inset 0 0 0 2px var(--pink); color:var(--pink)}
.lf-sec .lf-btn-ghost, .lf-sec-tint .lf-btn-ghost{color:var(--pink-text); box-shadow:inset 0 0 0 2px var(--pink-text)}
.lf-btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--pink), 0 8px 24px rgba(255,0,191,.18)}
.lf-btn-sm{padding:9px 18px; font-size:14px}
.lf-row-btn{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}

/* ---------- hero ---------- */
.lf-hero{background:linear-gradient(180deg,var(--ink-deep) 0%,var(--ink) 70%);
  color:#fff; padding:72px 0 64px; overflow:hidden;
  box-shadow:inset 0 -4px 0 var(--pink)}
.lf-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
@media (max-width:940px){
  .lf-hero-grid{grid-template-columns:1fr; grid-template-rows:auto auto; gap:40px}
  /* the route is the visual premise; below 940 it goes above the copy so the
     first screen on a phone is not two stacked paragraphs */
  .lf-hero-route{order:-1}
}
.lf-hero-copy .lf-kick{margin-bottom:4px}

/* route card */
.lf-route-card{margin:0; background:rgba(255,255,255,.04);
  border:1px solid var(--line-ink); border-radius:var(--radius-lg); padding:26px 22px 18px}
.lf-route{display:block; width:100%; height:auto}
.lf-route-shadow{stroke:rgba(255,255,255,.14); stroke-width:3; stroke-dasharray:2 11;
  stroke-linecap:round}
.lf-route-path{stroke:var(--pink); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke-dashoffset 2200ms var(--ease)}
.lf-dot{fill:#fff; stroke:var(--pink); stroke-width:3}
.lf-dot-pickup{fill:var(--pink)}
.lf-dot-ring{fill:none; stroke:var(--pink); stroke-width:2; opacity:.5}
.lf-pin{fill:var(--pink)}
.lf-pin-eye{fill:var(--ink)}
.lf-stop-t{font-family:var(--font); font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; fill:var(--muted-ink)}
.lf-stop-mid{text-anchor:middle}
.lf-route-cap{margin:14px 4px 0; font-size:13.5px; line-height:1.55; color:var(--muted-ink)}
/* draw-once choreography: armed by JS, so no-JS users see the finished route */
.armed .lf-route-stop{opacity:0}
.drawn .lf-route-stop{opacity:1; transition:opacity .45s var(--ease)}
.drawn .lf-stop-1{transition-delay:.1s}
.drawn .lf-stop-2{transition-delay:.55s}
.drawn .lf-stop-3{transition-delay:1s}
.drawn .lf-stop-4{transition-delay:1.4s}
.drawn .lf-stop-5{transition-delay:1.8s}
.drawn .lf-stop-6{transition-delay:2.1s}

/* stat strip */
.lf-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin:56px 0 0; padding:0}
@media (max-width:840px){ .lf-stats{grid-template-columns:repeat(2,1fr)} }
.lf-stat{background:rgba(255,255,255,.05); border:1px solid var(--line-ink);
  border-radius:var(--radius); padding:20px 22px; display:flex;
  flex-direction:column-reverse; gap:6px}
.lf-stat dd{margin:0; font-size:34px; font-weight:800; color:#fff; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.lf-stat dd b{color:var(--pink); font-weight:800}
.lf-stat dt{font-size:13.5px; color:var(--muted-ink); line-height:1.4}

/* ---------- sections ---------- */
.lf-sec{padding:88px 0}
.lf-sec-tint{background:var(--paper-warm)}
.lf-sec-ink{background:var(--ink); color:#EDEBFA}
.lf-head{margin-bottom:40px}

/* ---------- career ---------- */
.lf-career{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.lf-job{display:grid; grid-template-columns:190px 1fr; gap:26px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px}
.lf-sec-tint .lf-job{background:var(--paper)}
@media (max-width:720px){ .lf-job{grid-template-columns:1fr; gap:8px} }
.lf-job-when{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pink-text); padding-top:4px}
.lf-job-body p{margin:10px 0 0; font-size:15.5px; color:var(--muted)}

/* ---------- audit ---------- */
.lf-audit-tools{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:0 0 22px}
/* S-3: one filter-rail behaviour across all four sites. Same horizontally
   scrollable rail the mobile nav uses, so no label ever orphans onto its own
   row. min-width:0 lets the rail shrink inside the flex parent and scroll. */
.lf-filter{display:flex; flex-wrap:nowrap; gap:8px; min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none}
.lf-filter::-webkit-scrollbar{display:none}
.lf-filter button{font-family:var(--font); font-size:14px; font-weight:700; cursor:pointer;
  flex:0 0 auto; min-height:44px; padding:0 16px; display:inline-flex; align-items:center;
  white-space:nowrap; border-radius:999px; border:2px solid var(--line);
  background:var(--paper); color:var(--muted)}
.lf-filter button:hover{border-color:var(--pink-text); color:var(--pink-text)}
.lf-filter button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

/* S-1: cap the container, not the paragraph. Previously the measure cap sat on
   .lf-row-proof p, so the panel border ran to ~1070px while the text stopped
   around 560, leaving a ~512px empty right gutter at 1440. */
.lf-audit{display:grid; gap:12px; max-width:780px}
.lf-row{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden}
.lf-row summary{display:flex; align-items:center; gap:16px; padding:18px 22px;
  cursor:pointer; list-style:none; font-weight:700; color:var(--ink); font-size:15.5px}
.lf-row summary::-webkit-details-marker{display:none}
.lf-row summary::before{content:""; flex:0 0 10px; width:10px; height:10px;
  border-right:2.5px solid var(--pink-text); border-bottom:2.5px solid var(--pink-text);
  transform:rotate(45deg); transition:transform .2s var(--ease); margin-right:2px}
.lf-row[open] summary::before{transform:rotate(225deg)}
.lf-row summary:hover{background:var(--pink-soft)}
.lf-req{flex:1 1 auto}
.lf-row-proof{padding:2px 22px 20px 50px}
.lf-row-proof p{margin:0; font-size:15px; color:var(--muted)}
@media (max-width:600px){ .lf-row-proof{padding-left:22px} }

/* S-2: shared verdict-chip geometry across all four sites. Palette divergence
   is intended and stays; height, padding, case and radius do not. */
.lf-chip{flex:0 0 auto; height:26px; padding:0 12px; display:inline-flex; align-items:center;
  font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:none;
  border-radius:999px; white-space:nowrap}
.lf-chip-strong{background:var(--ok-bg); color:var(--ok-text)}
.lf-chip-partial{background:var(--warn-bg); color:var(--warn-text)}
.lf-chip-live{background:var(--pink-soft); color:var(--pink-text)}

/* ---------- utilization board ---------- */
.lf-board-wrap{margin-bottom:64px}
.lf-board-intro{margin-bottom:22px}
.lf-board-intro p{margin:6px 0 0; color:var(--muted)}
/* horizontal padding is fluid on purpose: a stepped value here would make the
   meter track inside it jump backwards at the breakpoint */
.lf-board{background:var(--ink); color:#EDEBFA; border-radius:var(--radius-lg);
  padding:26px clamp(16px,2.6vw,28px) 22px; border:1px solid var(--ink-panel)}
@media (max-width:600px){ .lf-board{padding-top:20px; padding-bottom:18px} }

.lf-board-controls{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px}
.lf-toggle{display:inline-flex; align-items:center; gap:11px; cursor:pointer;
  font-family:var(--font); text-align:left;
  background:var(--ink-panel); color:#EDEBFA; border:1px solid var(--line-ink);
  border-radius:999px; padding:9px 18px 9px 12px;
  transition:border-color .18s var(--ease), background .18s var(--ease)}
.lf-toggle:hover{border-color:var(--pink)}
.lf-toggle-dot{flex:0 0 auto; width:34px; height:20px; border-radius:999px;
  background:rgba(255,255,255,.18); position:relative; transition:background .18s var(--ease)}
.lf-toggle-dot::after{content:""; position:absolute; top:3px; left:3px; width:14px; height:14px;
  border-radius:50%; background:#fff; transition:transform .18s var(--ease)}
.lf-toggle[aria-checked="true"] .lf-toggle-dot{background:var(--pink)}
.lf-toggle[aria-checked="true"] .lf-toggle-dot::after{transform:translateX(14px)}
.lf-toggle-txt{display:flex; flex-direction:column; line-height:1.25}
.lf-toggle-txt b{font-size:14px; font-weight:800}
.lf-toggle-txt small{font-size:11.5px; color:var(--muted-ink)}

.lf-board-legend{display:flex; gap:22px; margin:0 0 10px; font-size:11.5px;
  color:var(--muted-ink); letter-spacing:.04em}
.lf-legend-planned::before{content:""; display:inline-block; width:22px; height:8px;
  border-radius:99px; background:var(--pink); margin-right:7px; vertical-align:middle}
.lf-legend-line::before{content:""; display:inline-block; width:2px; height:12px;
  background:#fff; opacity:.7; margin-right:7px; vertical-align:middle}

.lf-board-rows{display:grid; gap:13px}
/* One row layout at every width. The meter always spans the whole row, so all
   five tracks are the same length at any viewport and none of them can be
   shortened by a neighbour's flag. Track length is therefore a function of the
   viewport alone and only ever grows as the viewport grows. */
.lf-ub-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"who nums" "meter meter" "flag flag";
  column-gap:16px; row-gap:0; align-items:center;
}
.lf-ub-who{grid-area:who}
.lf-ub-nums{grid-area:nums}
.lf-ub-meter{grid-area:meter; margin:9px 0 1px}
.lf-ub-flag{grid-area:flag; justify-self:start; margin-top:8px}
.lf-ub-who{display:flex; flex-direction:column; line-height:1.3}
.lf-ub-who b{font-size:15px; font-weight:800; color:#fff}
.lf-ub-who span{font-size:12px; color:var(--muted-ink)}
.lf-ub-meter{position:relative; height:14px; border-radius:99px;
  background:rgba(255,255,255,.12); overflow:visible}
.lf-ub-mark{position:absolute; left:80%; top:-4px; bottom:-4px; width:2px;
  background:#fff; opacity:.7; border-radius:2px}
.lf-ub-fill{position:absolute; left:0; top:0; bottom:0; max-width:100%;
  border-radius:99px; background:var(--pink);
  transition:width .55s var(--ease), background .3s var(--ease)}
.is-over .lf-ub-fill{background:#FF5A45}
.lf-ub-nums{display:flex; flex-direction:column; line-height:1.3; text-align:right;
  font-variant-numeric:tabular-nums}
.lf-ub-nums b{font-size:16.5px; font-weight:800; color:#fff; font-family:var(--mono)}
.is-over .lf-ub-nums b{color:#FF8A79}
.lf-ub-nums span{font-size:12.5px; color:var(--muted-ink)}
.lf-ub-flag{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#FF8A79; background:rgba(255,90,69,.14); border:1px solid rgba(255,90,69,.4);
  padding:4px 10px; border-radius:999px; white-space:normal; max-width:100%}
.lf-board-status{margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line-ink);
  font-size:14.5px; color:#EDEBFA}
.lf-board-cap{margin:14px 2px 0; font-size:13.5px; color:var(--muted); max-width:70ch}

/* static all-deductions-on widths (track scale runs 0 to 125 percent) */
.lf-w-noor{width:68.8%}
.lf-w-felix{width:64%}
.lf-w-dana{width:92.8%}
.lf-w-sam{width:75.2%}
.lf-w-priya{width:63.2%}

/* the high adoption quote */
.lf-quote-hi{margin:34px 0 0; padding:26px 30px; background:var(--pink-soft);
  border-radius:var(--radius); border-left:6px solid var(--pink)}
.lf-quote-hi blockquote{margin:0; font-size:clamp(17px,2.2vw,21px); font-weight:700;
  line-height:1.45; color:var(--ink)}
.lf-quote-hi figcaption{margin-top:10px; font-size:13.5px; font-weight:700; color:var(--pink-text)}

/* ---------- system cards + motion card ---------- */
.lf-sysgrid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start;
  margin-bottom:56px}
@media (max-width:880px){ .lf-sysgrid{grid-template-columns:1fr} }
.lf-syscard{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 30px}
.lf-syscard p{margin:12px 0 0; font-size:15.5px; color:var(--muted)}
.lf-syshead{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.lf-sysdom{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted)}
.lf-sysnote{font-size:13.5px; border-top:1px solid var(--line); padding-top:12px}
.lf-rt{display:flex; justify-content:center}

/* ---------- relay ---------- */
.lf-relay{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 30px; margin-bottom:56px}
.lf-relay > p{margin:12px 0 0; font-size:15.5px; color:var(--muted)}
.lf-relay-steps{list-style:none; counter-reset:step; margin:22px 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:760px){ .lf-relay-steps{grid-template-columns:1fr} }
.lf-relay-steps li{counter-increment:step; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px 16px;
  font-size:14.5px; color:var(--muted); position:relative}
.lf-relay-steps li::before{content:counter(step,decimal-leading-zero); display:block;
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--pink-text);
  margin-bottom:8px; letter-spacing:.08em}
.lf-relay-steps li b{color:var(--ink)}

/* ---------- leverage ---------- */
.lf-leverage{border-left:6px solid var(--pink); padding:6px 0 6px 28px}
.lf-leverage p{margin:0; color:var(--muted)}

/* ---------- testimonials ---------- */
.lf-quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media (max-width:760px){ .lf-quotes{grid-template-columns:1fr} }
.lf-quote{margin:0; background:var(--ink-panel); border:1px solid var(--line-ink);
  border-radius:var(--radius); padding:26px 28px}
.lf-quote blockquote{margin:0; font-size:16.5px; line-height:1.55; color:#fff; font-weight:600}
.lf-quote figcaption{margin-top:12px; font-size:13px; font-weight:700; color:var(--muted-ink)}
.lf-quote-top{grid-column:1 / -1; border-color:rgba(255,0,191,.5)}
.lf-quote-top blockquote{font-size:clamp(19px,2.6vw,26px); font-weight:800; line-height:1.4}
.lf-quote-top figcaption{color:var(--pink)}

/* ---------- why + plan ---------- */
.lf-why p{margin:0 0 16px; font-size:16.5px}
.lf-plan{margin-top:24px}
.lf-plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
@media (max-width:760px){ .lf-plan-grid{grid-template-columns:1fr} }
.lf-plan-card{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px; display:flex; flex-direction:column; gap:10px}
.lf-plan-when{align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pink-text); background:var(--pink-soft);
  padding:4px 12px; border-radius:999px}
.lf-plan-card p{margin:0; font-size:14.5px; color:var(--muted)}

/* ---------- contact + footer ---------- */
.lf-contact-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.lf-contact-note{margin-top:22px; font-size:13.5px; color:var(--muted)}
.lf-footer{background:var(--ink-deep); color:var(--muted-ink); padding:44px 0 52px;
  font-size:13.5px}
.lf-footer p{margin:0 0 12px; max-width:76ch}
.lf-footer a{color:#fff}
.lf-footer-meta{color:var(--muted-ink)}

/* ---------- reveal on scroll (armed only when JS is present) ---------- */
.js .reveal{opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  .lf-route-path{transition:none}
  .armed .lf-route-stop{opacity:1}
  .lf-btn, .lf-btn:hover{transform:none; transition:none}
  .lf-btn:active{transform:none}
  .lf-ub-fill{transition:none}
  /* press feedback stays, it just lands instantly instead of easing */
  .lf-filter button, .lf-toggle, .lf-row summary, .lf-jump a,
  .lf-nav-links a, .lf-row summary::before{transition:none}
}

/* =========================================================
   RESOURCING-TOOL MOTION CARD
   ~12s CSS-only loop, no JS, no images. Themeable via custom properties set
   inline on .rt-card, which is where the M3 tokens are wired in. Do not rename
   the rt- prefix and do not drop the reduced-motion block at the bottom.
   ========================================================= */
.rt-card{
  --rt-bg:#101014; --rt-panel:#17171d; --rt-fg:#f2f2f5; --rt-muted:#9a9aa8;
  --rt-line:rgba(255,255,255,.12); --rt-accent:#6f8cff; --rt-ok:#39c07f; --rt-warn:#ef6a5a;
  --rt-radius:14px;
  --rt-font:inherit; --rt-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  position:relative; width:100%; max-width:460px; box-sizing:border-box;
  font-family:var(--rt-font); color:var(--rt-fg); background:var(--rt-bg);
  border:1px solid var(--rt-line); border-radius:var(--rt-radius);
  padding:18px 18px 16px; overflow:hidden; line-height:1.45;
}
.rt-card *,.rt-card *::before,.rt-card *::after{box-sizing:border-box}
.rt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--rt-line)}
.rt-head-t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rt-muted);font-weight:600;margin:0}
.rt-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;
  color:var(--rt-muted);font-variant-numeric:tabular-nums}
.rt-dot{width:6px;height:6px;border-radius:50%;background:var(--rt-accent);animation:rt-pulse 2s ease-in-out infinite}

/* stage keeps a stable height so nothing jumps */
.rt-stage{position:relative;min-height:206px}

/* --- step 1: what was said in the meeting --- */
.rt-said{display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(6px);
  animation:rt-said 12s cubic-bezier(.2,.7,.3,1) infinite}
.rt-av{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--rt-panel);
  border:1px solid var(--rt-line);display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--rt-muted)}
.rt-bub{flex:1 1 auto;background:var(--rt-panel);border:1px solid var(--rt-line);
  border-radius:10px;border-top-left-radius:3px;padding:9px 11px;font-size:12.5px;color:var(--rt-muted)}
.rt-bub b{color:var(--rt-fg);font-weight:600}

/* --- step 2: the decision, staged for a yes --- */
.rt-prop{margin-top:12px;border:1px solid var(--rt-line);border-left:3px solid var(--rt-accent);
  border-radius:10px;background:var(--rt-panel);padding:11px 12px;
  opacity:0;transform:translateY(8px) scale(.985);animation:rt-prop 12s cubic-bezier(.2,.7,.3,1) infinite}
.rt-prop-k{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--rt-muted);
  font-weight:700;margin:0 0 5px}
.rt-prop-b{font-size:13px;font-weight:600;margin:0;color:var(--rt-fg)}
.rt-prop-r{display:flex;align-items:center;gap:8px;margin-top:10px}
.rt-btn{font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;
  border:1px solid var(--rt-line);color:var(--rt-fg);background:transparent;position:relative;overflow:hidden}
.rt-btn-y{border-color:transparent;color:#fff;background:var(--rt-accent)}
.rt-btn-y::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:rt-press 12s linear infinite}
.rt-hint{font-size:10.5px;color:var(--rt-muted);margin-left:auto}

/* --- step 3: the plan re-balances --- */
.rt-grid{margin-top:13px;opacity:0;animation:rt-grid 12s cubic-bezier(.2,.7,.3,1) infinite}
.rt-grid-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rt-grid-t{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--rt-muted);font-weight:700;margin:0}
.rt-stamp{font-size:9.5px;font-weight:700;color:var(--rt-ok);letter-spacing:.03em;
  opacity:0;animation:rt-stamp 12s ease-out infinite}
.rt-row{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:9px;margin-top:7px}
.rt-name{font-size:11.5px;color:var(--rt-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-track{display:block;height:7px;border-radius:99px;background:var(--rt-line);overflow:hidden}
.rt-fill{display:block;height:100%;border-radius:99px;background:var(--rt-accent);width:60%}
.rt-fill-over{background:var(--rt-warn);width:100%;animation:rt-over 12s cubic-bezier(.4,0,.2,1) infinite}
.rt-fill-up{width:52%;animation:rt-up 12s cubic-bezier(.4,0,.2,1) infinite}
.rt-pct{position:relative;display:block;height:15px;font-size:10.5px;font-family:var(--rt-mono);
  color:var(--rt-muted);text-align:right;font-variant-numeric:tabular-nums}
.rt-num-before,.rt-num-after{position:absolute;right:0;top:0;white-space:nowrap}
.rt-foot{margin-top:14px;padding-top:11px;border-top:1px solid var(--rt-line);
  font-size:11px;color:var(--rt-muted);margin-bottom:0}

@keyframes rt-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes rt-said{
  0%{opacity:0;transform:translateY(6px)} 6%{opacity:1;transform:translateY(0)}
  82%{opacity:1;transform:translateY(0)} 92%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes rt-prop{
  0%,16%{opacity:0;transform:translateY(8px) scale(.985)}
  24%,82%{opacity:1;transform:translateY(0) scale(1)}
  92%,100%{opacity:0;transform:translateY(-4px) scale(.99)}}
@keyframes rt-press{0%,43%{opacity:0}45%{opacity:.5}50%,100%{opacity:0}}
@keyframes rt-grid{
  0%,46%{opacity:0} 54%,86%{opacity:1} 94%,100%{opacity:0}}
@keyframes rt-stamp{0%,58%{opacity:0}66%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes rt-over{0%,54%{width:100%;background:var(--rt-warn)}64%,100%{width:84%;background:var(--rt-accent)}}
@keyframes rt-up{0%,54%{width:52%}64%,100%{width:71%}}
/* swap the numbers with the bars using two spans */
.rt-num-before{animation:rt-numb 12s steps(1,end) infinite}
.rt-num-after{opacity:0;animation:rt-numa 12s steps(1,end) infinite}
@keyframes rt-numb{0%,54%{opacity:1}54.01%,100%{opacity:0}}
@keyframes rt-numa{0%,54%{opacity:0}54.01%,100%{opacity:1}}
.rt-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* narrow-column tuning: the card sits in a ~290px grid cell on this page */
.rt-card .rt-btn{white-space:nowrap}
.rt-card .rt-prop-r{flex-wrap:wrap;row-gap:6px}

@media (prefers-reduced-motion: reduce){
  /* the universal selector does not match pseudo-elements, and rt-press lives
     on .rt-btn-y::after, so it has to be named explicitly */
  .rt-card, .rt-card *, .rt-card *::before, .rt-card *::after{animation:none !important}
  .rt-said,.rt-prop,.rt-grid,.rt-stamp,.rt-num-after{opacity:1 !important;transform:none !important}
  .rt-num-before{display:none}
  .rt-fill-over{width:84%;background:var(--rt-accent)}
  .rt-fill-up{width:71%}
}

/* ---------- motion card: Lyft theme wrapper + inline-style replacements ---------- */
.lf-rt .rt-card{
  --rt-bg:var(--ink);
  --rt-panel:var(--ink-panel);
  --rt-fg:#F7F6FB;
  --rt-muted:var(--muted-ink);
  --rt-line:rgba(255,255,255,.14);
  --rt-accent:var(--pink);
  --rt-ok:#5CE0A1;
  --rt-warn:#FF7A6B;
  --rt-radius:var(--radius);
  --rt-font:var(--font);
  --rt-mono:var(--mono);
  margin:0 auto;
}
.lf-rt .rt-btn-y{color:var(--ink); font-weight:800}
/* replacements for the pattern's inline style attributes (CSP forbids them) */
.lf-rt .rt-bub{margin:0}
.lf-rt .rt-fill-hold{width:78%}
.lf-rt .rt-num-static{animation:none; opacity:1}
@media (prefers-reduced-motion: reduce){
  .lf-rt .rt-num-static{display:block}
}


/* ---------- visually hidden (S4) ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- hero jump list (L13) ---------- */
.lf-jump{margin-top:20px}
.lf-jump ul{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:980px){ .lf-jump ul{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .lf-jump ul{grid-template-columns:1fr; gap:0} }
.lf-jump a{display:block; text-decoration:none; color:#EDEBFA; padding:12px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--line-ink);
  transition:background .18s var(--ease), border-color .18s var(--ease)}
.lf-jump a:hover{background:rgba(255,255,255,.07); border-color:var(--pink)}
.lf-jump b{display:block; font-size:14.5px; font-weight:800; color:#fff}
.lf-jump span{display:block; margin-top:2px; font-size:13px; line-height:1.4;
  color:var(--muted-ink)}
@media (max-width:600px){
  .lf-jump a{border:0; border-bottom:1px solid var(--line-ink); border-radius:0;
    padding:14px 2px}
}


/* ---------- measure caps on the long-form copy (S9) ---------- */
.lf-job-body p, .lf-board-status, .lf-contact-note{max-width:62ch}
/* S-1: the audit row measure now comes from .lf-audit's container cap */
.lf-row-proof p{max-width:none}

/* ---------- press feedback (S5) ---------- */
.lf-btn:active{transform:translateY(0); box-shadow:0 2px 8px rgba(255,0,191,.24)}
.lf-filter button:active, .lf-toggle:active, .lf-row summary:active,
.lf-jump a:active, .lf-nav-links a:active{transform:scale(.99)}
.lf-row summary:active{background:var(--pink-soft)}
.lf-filter button:active{background:var(--pink-soft); border-color:var(--pink-text)}
.lf-toggle:active{background:rgba(255,255,255,.12)}
.lf-jump a:active{background:rgba(255,255,255,.12)}

/* ---------- collapsed audit rows on a phone (L7) ---------- */
@media (max-width:600px){
  .lf-row summary{display:grid; grid-template-columns:16px 1fr; gap:8px 10px;
    padding:14px 16px; align-items:start}
  .lf-row summary::before{margin-top:6px; margin-right:0}
  .lf-req{grid-column:2}
  .lf-chip{grid-column:2; justify-self:start}
}

/* ---------- mobile spacing (S10) ---------- */
@media (max-width:600px){
  .lf-sec{padding:56px 0}
  .lf-job, .lf-syscard, .lf-relay, .lf-plan-card, .lf-quote{padding:20px}
}

/* ---------- footer contact tap targets (S13) ---------- */
.lf-footer-meta a{display:inline-block; padding:8px 0}

/* ---------- Windows High Contrast Mode (S6) ----------
   Every chart here encodes its data as background-color on empty elements, so
   under forced colors it would go white on white. The bars are content. */
@media (forced-colors: active){
  .lf-board, .lf-ub-meter, .rt-track{border:1px solid CanvasText}
  .lf-ub-fill, .lf-ub-mark, .rt-fill, .rt-dot{forced-color-adjust:none}
  .lf-toggle[aria-checked="true"] .lf-toggle-dot{forced-color-adjust:none}
  .lf-toggle-dot{border:1px solid CanvasText}
}

/* =========================================================
   PRINT
   The reveal system arms opacity:0 and only IntersectionObserver clears it,
   and print never scrolls, so every revealed block has to be un-armed here.
   The dark grounds also have to be inverted or they print white on white.
   ========================================================= */
@media print{
  :root{
    --ink:#111111; --ink-deep:#111111; --ink-panel:#FFFFFF;
    --paper:#FFFFFF; --paper-warm:#FFFFFF;
    --line:#CCCCCC; --line-ink:#CCCCCC;
    --text:#111111; --muted:#333333; --muted-ink:#333333;
    --pink:#A8007F; --pink-text:#A8007F; --pink-soft:#F7EEF5;
  }
  @page{margin:14mm}
  html{scroll-behavior:auto}
  body{background:#fff; color:#111; font-size:11pt}

  /* un-arm every scroll-driven and draw-once state */
  html.js .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .armed .lf-route-stop,.lf-route-stop{opacity:1 !important; transition:none !important}
  .lf-route-path{transition:none !important}

  /* audit proofs: collapsed rows must still reach paper */
  .lf-row:not([open]) > .lf-row-proof{display:block !important}
  .lf-row[hidden]{display:block !important}

  /* screen-only furniture */
  .lf-nav,.lf-skip,.lf-audit-tools,.lf-row-btn,.lf-jump,.rt-card,.lf-board-legend{display:none !important}
  .lf-row summary::before{display:none}

  .lf-banner{background:#fff; border-bottom:1px solid #ccc}
  .lf-banner p,.lf-banner strong{color:#333}

  .lf-hero{background:#fff; color:#111; padding:18pt 0 12pt; overflow:visible;
    box-shadow:none; border-bottom:1px solid #ccc}
  .lf-hero .lf-h1{color:#111}
  .lf-hero .lf-lead,.lf-lead-2{color:#333}
  .lf-hero-grid{grid-template-columns:1fr; gap:18pt}
  .lf-route-card{background:#fff; border:1px solid #ccc}
  .lf-stop-t{fill:#333}
  .lf-stats{margin-top:20pt; grid-template-columns:repeat(4,1fr)}
  .lf-stat{background:#fff; border:1px solid #ccc}
  .lf-stat dd{color:#111}
  .lf-stat dd b{color:#A8007F}
  .lf-stat dt{color:#333}

  .lf-sec{padding:20pt 0}
  .lf-sec-ink{background:#fff; color:#111}
  .lf-sec-ink .lf-h2{color:#111}
  .lf-quote{background:#fff; border:1px solid #ccc}
  .lf-quote blockquote{color:#111}
  .lf-quote figcaption,.lf-quote-top figcaption{color:#333}

  /* the utilization board is the exhibit; it has to print as data, not as a
     row of empty tracks, so the bars keep their ink */
  .lf-board{background:#fff; color:#111; border:1px solid #999}
  .lf-toggle{background:#fff; color:#111; border:1px solid #999}
  .lf-toggle-txt small{color:#333}
  .lf-toggle-dot{background:#BBBBBB; print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .lf-toggle[aria-checked="true"] .lf-toggle-dot{background:#A8007F}
  .lf-ub-who b,.lf-ub-nums b,.lf-board-status{color:#111}
  .lf-ub-who span,.lf-ub-nums span{color:#333}
  .is-over .lf-ub-nums b{color:#8A2018}
  .lf-ub-meter{background:#EDEDED; box-shadow:inset 0 0 0 1px #999;
    print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .lf-ub-fill,.lf-ub-mark{print-color-adjust:exact; -webkit-print-color-adjust:exact}
  .lf-ub-mark{background:#111; opacity:1}
  .is-over .lf-ub-fill{background:#C0392B}
  .lf-ub-flag{color:#8A2018; background:#fff; border:1px solid #8A2018}
  .lf-quote-hi{background:#fff; border:1px solid #ccc; border-left:4px solid #A8007F}

  .lf-btn{background:#fff !important; color:#111 !important; box-shadow:none !important;
    border:1px solid #999; padding:6px 12px; transform:none !important}

  .lf-footer{background:#fff; color:#333; border-top:1px solid #ccc}
  .lf-footer a{color:#111}
  a{color:#111; text-decoration:underline}

  .lf-job,.lf-row,.lf-syscard,.lf-relay,.lf-plan-card,.lf-quote,
  .lf-leverage,.lf-relay-steps li,.lf-stats,.lf-stat,.lf-board-controls,
  .lf-ub-row,.lf-route-card{break-inside:avoid}
}
/* Chrome hides collapsed <details> content through this pseudo-element, and an
   unknown pseudo-element would invalidate a whole selector list, so it lives alone. */
@media print{
  .lf-row::details-content{content-visibility:visible !important; block-size:auto !important;
    opacity:1 !important}
}


/* ---- panel fixes, 2026-09-09 ---- */
@media (forced-colors:active){
  /* the verdict chips were color-plus-text only; give them an edge and a dot */
  .lf-chip{border:1px solid CanvasText;forced-color-adjust:none;background:Canvas;color:CanvasText}
}
/* non-color verdict encoding, matching the newer pages in the fleet */
.lf-chip::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  border:1.5px solid currentColor;margin-right:6px;vertical-align:-1px;box-sizing:border-box}
.lf-chip-strong::before{background:currentColor}
.lf-chip-partial::before{background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)}
.lf-chip-gap::before{background:transparent}
@media (forced-colors:active){
  .lf-chip::before{border-color:CanvasText;background:Canvas}
  .lf-chip-strong::before{background:CanvasText}
  .lf-chip-partial::before{background:linear-gradient(90deg,CanvasText 0 50%,Canvas 50% 100%);forced-color-adjust:none}
}