/* Product family pages: Motion Traction and Motion Manning.
   Same public identity as the homepage and founding-haulier page: shared theme tokens, Manrope,
   tonal surfaces, lime actions. Mock screens are labelled sample data on the page. */
.product-page{overflow-x:clip}
.product-page h1{font-size:clamp(42px,5.2vw,72px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance;margin:0 0 24px}
.product-page h2{margin:0 0 22px;text-wrap:balance}
.product-page h3{font-size:22px;line-height:1.3;letter-spacing:-.02em;margin:0 0 12px}
.product-page p{line-height:1.7;color:var(--muted)}
.product-page .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.product-page :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:4px}

/* Actions */
.pp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.product-page .pp-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:14px 20px;border-radius:10px;background:var(--raised);color:var(--text);font-size:14px;font-weight:750;line-height:1.5}
.product-page .pp-button:hover{background:var(--soft);color:var(--text)}
.product-page .pp-button.is-primary{background:var(--accent);color:var(--accent-ink)}
.product-page .pp-button.is-primary:hover{background:var(--accent-hover);color:var(--accent-ink)}
.pp-button svg,.pp-family a svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Hero */
.pp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding-block:64px 72px}
.product-page .pp-status{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:7px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:12px;font-weight:700;line-height:1.4}
.pp-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.product-page .pp-lead{max-width:32ch;margin:0 0 18px;color:var(--text);font-size:22px;font-weight:650;line-height:1.5}
.pp-hero-copy>p:not(.pp-status,.pp-lead){max-width:52ch}
.product-page .pp-small{max-width:60ch;margin:20px 0 0;font-size:12px;line-height:1.6}
.pp-small a{color:var(--accent-text)}

/* Sample run sheet */
.pp-sheet{min-width:0;padding:24px;border-radius:16px;background:var(--raised)}
.pp-sheet-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:16px}
.pp-sheet-head strong{color:var(--text);font-size:15px;font-weight:750}
.pp-sheet-head span{color:var(--muted);font-size:11px;font-weight:700}
.pp-runs{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pp-run{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:14px 16px;border-radius:10px;background:var(--surface)}
.pp-run>div{display:grid;gap:5px;justify-items:start;min-width:0}
.pp-run-ref{color:var(--muted);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.pp-run-route{color:var(--text);font-size:14px;font-weight:700;line-height:1.35}
.pp-run small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.pp-slot{color:var(--muted);font-size:12px;font-weight:650;line-height:1.4}
.pp-run .pp-slot.is-empty{padding:8px 10px;border:1px dashed var(--line);border-radius:6px;color:var(--text)}
.pp-sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;margin-top:14px}
.product-page .pp-sheet-foot p{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:12px;font-weight:650;line-height:1.5}
.pp-replay{flex:none;min-height:36px;padding:7px 12px;border:0;border-radius:8px;background:var(--surface);color:var(--text);font:700 12px/1.4 Manrope,'Segoe UI',sans-serif;cursor:pointer}
.pp-replay:hover{background:var(--soft)}
.pp-replay[hidden]{display:none}
.pp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:4px;background:var(--soft);color:var(--text);font-size:11px;font-weight:750;line-height:1.3;white-space:nowrap}
.pp-chip::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:currentColor}
.pp-chip.is-ok{background:var(--accent-soft);color:var(--accent-text)}
.pp-chip.is-check{background:var(--amber-bg);color:var(--amber)}
.pp-chip.is-block{background:var(--red-bg);color:var(--red)}

/* Manning levels table */
.pp-levels{width:100%;border-collapse:separate;border-spacing:6px;margin:-6px;table-layout:fixed;font-variant-numeric:tabular-nums}
.pp-levels th{padding:6px 4px;color:var(--muted);font-size:12px;font-weight:700;text-align:center}
.pp-levels tbody th{width:68px;color:var(--text);text-align:left}
.pp-levels td{height:58px;padding:8px 4px;border-radius:8px;background:var(--accent-soft);color:var(--accent-text);text-align:center;vertical-align:middle}
.pp-levels td strong{display:block;font-size:15px;font-weight:750}
.pp-levels td small{display:block;margin-top:2px;font-size:11px;font-weight:700}
.pp-levels td.is-gap{background:var(--amber-bg);color:var(--amber)}

/* Sections */
.pp-section{padding-block:80px}
.pp-soft{background:var(--raised)}
.pp-heading{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-bottom:40px}
.pp-heading h2{margin:0}
.pp-heading>p{max-width:60ch;margin:0}
.pp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;counter-reset:pp-step}
.pp-steps li{padding:24px;border-radius:14px;background:var(--surface);counter-increment:pp-step}
.pp-steps li::before{content:counter(pp-step);display:grid;place-items:center;width:34px;height:34px;margin-bottom:18px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-size:14px;font-weight:800}
.pp-steps.is-plain li::before{content:"";width:34px;height:4px;border-radius:2px;background:var(--accent-text)}
.pp-steps h3{margin:0 0 8px;font-size:18px}
.pp-steps p{margin:0;font-size:14px;line-height:1.65}

/* How it works */
.pp-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
.pp-tabs[hidden]{display:none}
.pp-tabs button{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:54px;padding:14px 18px;border:0;border-radius:10px;background:var(--raised);color:var(--text);font:700 14px/1.4 Manrope,'Segoe UI',sans-serif;text-align:left;cursor:pointer}
.pp-tabs button:hover{background:var(--soft)}
.pp-tabs button span{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--soft);font-size:12px;font-weight:800}
.pp-tabs button[aria-selected=true],.pp-tabs button[aria-selected=true]:hover{background:var(--accent);color:var(--accent-ink)}
.pp-tabs button[aria-selected=true] span{background:var(--accent-ink);color:var(--accent)}
.pp-panels{display:grid;gap:20px}
.pp-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:32px;border-radius:16px;background:var(--raised)}
.pp-panel[hidden]{display:none}
.pp-panel-copy h3{font-size:25px}
.pp-panel-copy p{max-width:46ch;margin:0}
.pp-mock{min-width:0;padding:20px;border-radius:12px;background:var(--surface)}
.product-page .pp-mock-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0 0 14px;font-size:11px;font-weight:700;line-height:1.5}
.pp-mock dl{display:grid;gap:8px;margin:0}
.pp-mock dl>div{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:9px 12px;border-radius:8px;background:var(--raised);font-size:13px;line-height:1.4}
.pp-soft .pp-mock dl>div,.pp-soft .pp-bar-track{background:var(--raised)}
.pp-mock dt{color:var(--muted)}
.pp-mock dd{margin:0;color:var(--text);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.product-page .pp-mock-note{margin:14px 0 0;font-size:12px;line-height:1.6}

/* Estimate comparison */
.pp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.pp-split>div>p{max-width:54ch;margin:0}
.pp-split>div>p+p{margin-top:14px}
.pp-compare{padding:28px}
.pp-bar+.pp-bar{margin-top:18px}
.product-page .pp-bar-label{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:13px;line-height:1.4}
.pp-bar-label strong{color:var(--text);font-variant-numeric:tabular-nums}
.pp-bar-track{display:flex;height:24px;overflow:hidden;border-radius:4px;background:var(--soft)}
.pp-bar-fill{display:block;height:100%}
.pp-bar-fill.is-estimate{width:72.5%;border-radius:4px;background:var(--amber)}
.pp-bar-fill.is-drive{width:88.75%;background:var(--accent-text)}
.pp-bar-fill.is-break{width:11.25%;background:var(--sage)}
.product-page .pp-compare-result{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:22px 0 0;color:var(--text);font-size:14px;font-weight:650}

/* Feature band over the shared haulage footage */
.pp-band{position:relative;isolation:isolate;overflow:hidden;padding-block:72px;background:var(--editorial-forest,#143e2f)}
.pp-band-video,.pp-band-veil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pp-band-video{z-index:0;object-fit:cover}
.pp-band-veil{z-index:1;background:#0c281ed9}
.pp-band-content{position:relative;z-index:2}
.pp-band .pp-heading h2{color:#fff}
.pp-band .pp-heading>p{color:#d5e3dc}
.pp-video-control{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 18px auto;padding:11px;border:1px solid #9db9a9;border-radius:50%;background:#143e2f;color:#fff;cursor:pointer}
.pp-band .pp-video-control{border-color:#9db9a9}
.pp-video-control[hidden]{display:none}
.pp-video-control svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pp-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pp-feature{min-width:0;padding:16px 16px 24px;border-radius:14px;background:var(--surface);color:var(--text)}
.pp-feature h3,.pp-feature p{padding-inline:8px}
.product-page .pp-band-note{margin:24px 0 0;color:#d5e3dc;font-size:12px}
.pp-feature h3{margin:0 0 8px;font-size:18px;line-height:1.35}
.pp-feature p{margin:0;font-size:14px;line-height:1.65}

/* Product family */
.pp-family{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pp-family article{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px;border-radius:16px;background:var(--raised)}
.pp-family article.is-current{background:var(--accent-soft)}
.pp-family h3{margin:16px 0 10px}
.pp-family p{margin:0 0 22px;font-size:15px}
.pp-tag{display:inline-flex;padding:5px 9px;border-radius:4px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:750;line-height:1.3}
.pp-tag.is-live{background:var(--accent-soft);color:var(--accent-text)}
.pp-family .is-current .pp-tag{background:var(--surface)}
.product-page .pp-family a{display:inline-flex;align-items:center;gap:10px;min-height:46px;margin-top:auto;padding:12px 16px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-size:14px}
.product-page .pp-family a:hover{background:var(--accent);color:var(--accent-ink)}
.pp-here{margin-top:auto;color:var(--accent-text);font-size:13px;font-weight:700;line-height:46px}

/* Questions and contact */
.pp-faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pp-faq details{padding:18px 20px;border-radius:10px;background:var(--raised)}
.pp-faq summary{min-height:44px;align-content:center;color:var(--text);font-size:15px;font-weight:700;cursor:pointer}
.pp-faq p{margin:12px 0 0;font-size:14px;line-height:1.7}
.product-page .pp-talk{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;margin-block:16px 56px;padding:40px;border-radius:16px;background:var(--accent-soft);scroll-margin-top:40px}
.pp-talk h2{margin:0 0 18px}
.pp-talk p{max-width:48ch;margin:0}
.pp-talk-contact{display:grid;gap:12px}
.product-page .pp-talk-contact .pp-button{justify-content:space-between;background:var(--surface)}
.product-page .pp-talk-contact .pp-button:hover{background:var(--soft)}
.product-page .pp-talk-contact .pp-button.is-primary{background:var(--accent)}
.product-page .pp-talk-contact .pp-button.is-primary:hover{background:var(--accent-hover)}
#how{scroll-margin-top:24px}

@media(max-width:1050px){
 .pp-features{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pp-split{gap:40px}
}
@media(max-width:900px){
 .pp-hero{grid-template-columns:1fr;gap:36px;padding-block:40px 56px}
 .pp-heading{gap:32px}
 .pp-panel{grid-template-columns:1fr;gap:24px;padding:24px}
 .pp-family{grid-template-columns:1fr}
 .pp-split{grid-template-columns:1fr}
 .product-page .pp-talk{grid-template-columns:1fr;gap:32px}
}
@media(max-width:700px){
 .product-page h1{font-size:46px}
 .product-page .pp-lead{font-size:20px}
 .pp-section{padding-block:56px}
 .pp-band{padding-block:56px}
 .pp-heading{grid-template-columns:1fr;gap:20px;margin-bottom:30px}
 .pp-tabs{grid-template-columns:1fr 1fr;margin-bottom:20px}
 .pp-tabs button{padding:12px}
 .pp-faq{grid-template-columns:1fr}
 .pp-sheet{padding:18px}
 .product-page .pp-talk{margin-block:8px 40px;padding:28px 24px}
 .pp-panel-copy h3{font-size:22px}
}
@media(max-width:560px){
 .pp-features,.pp-steps{grid-template-columns:1fr}
 .pp-run{grid-template-columns:1fr;gap:10px}
 .pp-mock dl>div{flex-wrap:wrap;gap:6px 12px}
 .pp-mock dd{text-align:left}
 .pp-levels{border-spacing:4px;margin:-4px}
 .pp-levels tbody th{width:52px}
 .pp-compare{padding:20px}
}
@media(max-width:400px){
 .product-page h1{font-size:40px}
 .pp-tabs button{font-size:13px}
}
@media(forced-colors:active){
 .pp-tabs button[aria-selected=true]{outline:2px solid Highlight}
 .pp-sheet,.pp-mock,.pp-feature,.pp-family article{border:1px solid CanvasText}
}

/* How it works: playback controls and the progress line on each step tab. */
.pp-tabs-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;margin-bottom:14px}
.pp-tabs-controls[hidden],.pp-tabs-toggle[hidden]{display:none}
.product-page .pp-tabs-controls p{margin:0;font-size:13px}
.pp-tabs-toggle{flex:none;min-height:44px;padding:10px 16px;border:0;border-radius:8px;background:var(--raised);color:var(--text);font:700 13px/1.4 Manrope,'Segoe UI',sans-serif;cursor:pointer}
.pp-tabs-toggle:hover{background:var(--soft)}
.pp-tab-track{position:absolute;left:10px;right:10px;bottom:0;height:3px;overflow:hidden;border-radius:2px}
.pp-tab-track b{display:block;height:100%;background:var(--accent-text);transform:scaleX(0);transform-origin:left}
.pp-tabs button[aria-selected=true] .pp-tab-track{background:#111b1526}
.pp-tabs button[aria-selected=true] .pp-tab-track b{background:var(--accent-ink)}

/* Service card pictures. Small sample screens drawn from the shared tokens; decorative, hidden from assistive tech. */
.pp-visual{position:relative;height:134px;margin-bottom:18px;padding:14px;overflow:hidden;border-radius:10px;background:var(--raised);color:var(--muted);font-size:11px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;user-select:none}
.pp-visual b{color:var(--text);font-weight:700}
.v-pill{display:inline-flex;align-items:center;padding:4px 7px;border-radius:4px;background:var(--accent-soft);color:var(--accent-text);font-size:11px;font-weight:750;line-height:1.3;white-space:nowrap}
.v-pill.is-check{background:var(--amber-bg);color:var(--amber)}
.v-pill.is-out{background:var(--soft);color:var(--muted)}
.v-pill.is-corner{position:absolute;right:12px;bottom:12px}
.v-file{display:inline-block;padding:3px 7px;border-radius:4px;background:var(--surface);color:var(--text);font-weight:700}
.v-rows{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.v-import .v-rows{margin-top:10px;padding-right:34%}
.v-rows li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center}
.v-rows li>i{display:block;height:8px;border-radius:4px;background:var(--soft)}
.v-manning .v-rows{gap:4px}
.v-manning .v-rows li{grid-template-columns:40px minmax(0,1fr) 16px;padding:2px 8px;border-radius:6px;background:var(--surface)}
.v-manning em{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text)}
.v-manning em svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v-manning .v-pill.is-corner{position:static;margin-top:6px}
.v-meter{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;align-items:center;margin-top:12px}
.v-meter+.v-meter{margin-top:14px}
.v-meter>i,.v-track{display:block;height:10px;overflow:hidden;border-radius:3px;background:var(--soft)}
.v-meter b,.v-track b{display:block;height:100%;border-radius:3px;background:var(--accent-text)}
.v-meter b.is-short{width:72%;background:var(--amber)}
.v-grid{display:grid;grid-template-columns:36px repeat(5,minmax(0,1fr));gap:6px;align-items:center;text-align:center}
.v-grid span:nth-child(6n+1){text-align:left}
.v-grid i{display:grid;place-items:center;height:28px;border-radius:5px;background:var(--accent-soft)}
.v-grid i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-text)}
.v-grid i.is-off{background:var(--soft)}
.v-grid i.is-off::after{display:none}
.v-hours-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:8px 0 12px}
.v-hours-head strong{color:var(--text);font-size:17px;font-weight:750}
.v-hours .v-track{height:12px}
.v-hours .v-track b{width:41%}
.v-ticks{display:flex;justify-content:space-between;margin-top:8px;font-size:11px}
.v-truck{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;padding:4px 8px;border-radius:6px;background:var(--surface)}
.v-truck+.v-truck{margin-top:6px}
.v-clash-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;margin-bottom:10px}
.v-lane{position:relative;height:34px;border-radius:6px;background:var(--soft)}
.v-block{position:absolute;top:5px;bottom:5px;display:grid;place-items:center;border-radius:4px;font-size:11px;font-style:normal;font-weight:750}
.v-block.is-a{left:5%;width:48%;background:var(--accent-soft);color:var(--accent-text)}
.v-block.is-b{left:40%;width:50%;background:var(--surface);color:var(--text)}
.v-overlap{position:absolute;top:5px;bottom:5px;left:40%;width:13%;border-radius:3px;background:var(--amber);opacity:.55;text-decoration:none}
.v-bubble{display:grid;gap:3px;max-width:88%;padding:10px 12px;border-radius:10px 10px 10px 3px;background:var(--surface)}

/* Motion. dist/product-pages-motion.js adds html.motion-ready when motion is welcome; without that class
   every motion-ready rule below is inert and the page is complete. Curves are the ones already used on the
   free plan and founding-haulier pages. Only transform, translate and opacity move. */
.product-page{--pp-move:cubic-bezier(.22,.61,.36,1);--pp-pop:cubic-bezier(.34,1.45,.64,1);--pp-lift:cubic-bezier(.16,1,.3,1)}
html.motion-ready .product-page .pp-enter{transition:opacity .4s ease-out,transform .5s var(--pp-move),translate .24s var(--pp-lift)}
html.motion-ready .product-page .pp-enter:not(.is-in){opacity:0;transform:translateY(16px)}
html.motion-ready .product-page .pp-steps li.pp-enter::before{transition:transform .36s .18s var(--pp-pop),opacity .2s .18s ease-out}
html.motion-ready .product-page .pp-steps li.pp-enter:not(.is-in)::before{opacity:0;transform:scale(.9)}
html.motion-ready .product-page [data-pp-play] :is(.m-rise,.m-slide,.m-slide-r){transition:opacity .36s ease-out,transform .42s var(--pp-move)}
html.motion-ready .product-page [data-pp-play] .m-fade{transition:opacity .3s ease-out}
html.motion-ready .product-page [data-pp-play] .m-pop{transition:opacity .2s ease-out,transform .36s var(--pp-pop)}
html.motion-ready .product-page [data-pp-play] .m-grow{transform-origin:left;transition:transform .7s var(--pp-move)}
html.motion-ready .product-page [data-pp-play]:not(.is-play) :is(.m-rise,.m-slide,.m-slide-r,.m-fade,.m-pop){opacity:0}
html.motion-ready .product-page [data-pp-play]:not(.is-play) .m-rise{transform:translateY(10px)}
html.motion-ready .product-page [data-pp-play]:not(.is-play) .m-slide{transform:translateX(-12px)}
html.motion-ready .product-page [data-pp-play]:not(.is-play) .m-slide-r{transform:translateX(14px)}
html.motion-ready .product-page [data-pp-play]:not(.is-play) .m-pop{transform:scale(.9)}
html.motion-ready .product-page [data-pp-play]:not(.is-play) .m-grow{transform:scaleX(0)}
html.motion-ready .product-page [data-pp-play] .d1{transition-delay:.11s}
html.motion-ready .product-page [data-pp-play] .d2{transition-delay:.22s}
html.motion-ready .product-page [data-pp-play] .d3{transition-delay:.33s}
html.motion-ready .product-page [data-pp-play] .d4{transition-delay:.44s}
html.motion-ready .product-page [data-pp-play] .d5{transition-delay:.55s}
html.motion-ready .product-page [data-pp-play] .d6{transition-delay:.66s}
html.motion-ready .product-page [data-pp-play] .d7{transition-delay:.77s}
html.motion-ready .product-page [data-pp-play] .d8{transition-delay:.88s}
html.motion-ready .product-page [data-pp-play] .d9{transition-delay:.99s}
html.motion-ready .product-page [data-pp-play] .d10{transition-delay:1.1s}
html.motion-ready .product-page [data-pp-play] .d11{transition-delay:1.21s}
html.motion-ready .product-page [data-pp-play] .d12{transition-delay:1.32s}
html.motion-ready .product-page [data-pp-play].is-reset *{transition:none}
.pp-feature,.pp-family article{transition:translate .24s var(--pp-lift)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .pp-feature:hover,.pp-family article:hover{translate:0 -5px}
}
@media(prefers-reduced-motion:no-preference){
 .product-page .pp-button,.pp-tabs button,.pp-tabs-toggle,.pp-replay{transition:transform .16s ease-out}
 .product-page .pp-button:active,.pp-tabs button:active,.pp-tabs-toggle:active,.pp-replay:active{transform:scale(.97)}
}
@media(prefers-reduced-motion:reduce){.pp-feature,.pp-family article{transition:none}}
@media(max-width:700px){.pp-tabs-controls{gap:12px}.product-page .pp-tabs-controls p{max-width:24ch}}
@media(max-width:560px){.pp-visual{height:138px}}
@media print{html.motion-ready .product-page .pp-enter,html.motion-ready .product-page [data-pp-play] :is(.m-rise,.m-slide,.m-slide-r,.m-fade,.m-pop,.m-grow){opacity:1!important;transform:none!important}}

/* Traction hero: the yard at first light behind the message, as the homepage hero does with the road.
   The scene keeps its dark forest colours in both themes; the sample sheet stays a themed panel on top. */
.pp-hero-scene{position:relative;isolation:isolate;background:#102219;color:#f5f6f5}
.pp-hero-backdrop{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;background:#143e2f}
.pp-hero-backdrop picture,.pp-hero-backdrop img{display:block;width:100%;height:100%}
.pp-hero-backdrop picture{transform-origin:82% 28%}
.pp-hero-backdrop img{object-fit:cover;object-position:74% 20%;filter:brightness(1.18) saturate(1.05)}
/* 1.46.3: a soft shade behind the words only, so the photo shows edge to edge like the home page (the old full-height left band read as an empty gap). */
.pp-hero-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 48% 62% at 24% 42%,rgba(8,22,15,.66) 0%,rgba(8,22,15,.42) 55%,rgba(8,22,15,0) 100%),linear-gradient(90deg,rgba(8,22,15,.38) 0%,rgba(8,22,15,.14) 40%,rgba(8,22,15,0) 62%),linear-gradient(0deg,rgba(8,22,15,.78),rgba(8,22,15,0) 34%)}
.pp-hero-scene h1,.pp-hero-scene .pp-lead,.pp-hero-scene .pp-hero-copy>p{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.pp-hero-scene .pp-hero{grid-template-columns:minmax(0,1fr);gap:40px;align-content:space-between;min-height:min(860px,calc(100svh - 92px));padding-block:64px 44px}
.pp-hero-scene .pp-hero-copy{max-width:640px}
.product-page .pp-hero-scene .pp-lead{max-width:38ch}
.pp-hero-scene .pp-sheet{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head foot" "runs runs";gap:14px 24px;padding:18px 20px 20px}
.pp-hero-scene .pp-sheet-head{grid-area:head;margin:0;gap:6px 14px}
.pp-hero-scene .pp-sheet-foot{grid-area:foot;justify-content:flex-end;gap:10px 20px;min-height:0;margin:0}
.pp-hero-scene .pp-runs{grid-area:runs;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pp-hero-scene .pp-run{grid-template-columns:minmax(0,1fr);gap:9px;align-content:start;padding:14px}
.pp-hero-scene .pp-run>div:nth-child(2){display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pp-hero-scene .pp-run>div:nth-child(3){display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pp-hero-scene .pp-run .pp-slot.is-empty{padding:5px 9px}
.product-page .pp-hero-scene h1{color:#fff}
.pp-hero-scene h1 span{color:#b5e557}
.product-page .pp-hero-scene .pp-lead{color:#f5f6f5}
.product-page .pp-hero-scene .pp-hero-copy>p:not(.pp-status,.pp-lead){color:#e3e9e3}
.product-page .pp-hero-scene .pp-status{background:#0e211ad9;color:#b5e557}
.product-page .pp-hero-scene .pp-small{color:#d3ddd2}
.pp-hero-scene .pp-small a{color:#b5e557}
.product-page .pp-hero-scene .pp-button:not(.is-primary){background:#f5f6f5;color:#11231a}
.product-page .pp-hero-scene .pp-button:not(.is-primary):hover{background:#e4eddf;color:#11231a}
.product-page .pp-hero-scene .pp-hero-copy :is(a,button):focus-visible{outline-color:#fff}
.pp-hero-scene .pp-sheet{box-shadow:0 24px 60px #00000059}
html.motion-ready .pp-hero-backdrop picture{animation:pp-yard-camera 4.5s ease-out 1 both}
@keyframes pp-yard-camera{from{transform:scale(1.02)}to{transform:scale(1.09)}}
@media(max-width:900px){
 .pp-hero-backdrop{bottom:auto;height:calc(64vw + 150px)}
 .pp-hero-backdrop img{object-position:76% 12%}
 .pp-hero-backdrop::after{background:linear-gradient(180deg,rgba(16,34,25,.2) 0%,rgba(16,34,25,.62) 44%,#102219 92%)}
 .pp-hero-scene .pp-hero{min-height:0;gap:32px;padding-block:calc(40vw + 6px) 56px}
 .pp-hero-scene .pp-sheet{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "runs" "foot";padding:18px}
 .pp-hero-scene .pp-sheet-foot{justify-content:space-between}
 .pp-hero-scene .pp-runs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .pp-hero-backdrop{height:calc(75vw + 170px)}
 .pp-hero-backdrop img{object-position:60% 0}
 .pp-hero-scene .pp-hero{padding-block:calc(60vw + 4px) 48px}
}
@media(max-width:560px){.pp-hero-scene .pp-runs{grid-template-columns:minmax(0,1fr)}}

/* Traction today: each card shows the job by hand, then turns over to the same step with Motion Traction.
   Stacked faces are the plain version; dist/product-pages.js adds is-flippable to overlay and turn them. */
.pp-steps.pp-flips li{padding:0;background:transparent}
.pp-steps.pp-flips li::before{content:none}
.pp-flip-inner{height:100%}
.pp-flip-face{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border-radius:14px;background:var(--surface)}
.pp-flip-back{margin-top:10px;background:var(--accent);color:var(--accent-ink)}
.product-page .pp-flip-back :is(h3,p){color:var(--accent-ink)}
.pp-flip-step{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--muted);font-size:12px;font-weight:700;line-height:1.3}
.pp-flip-step b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-size:14px;font-weight:800}
.pp-flip-back .pp-flip-step{color:var(--accent-ink)}
.pp-flip-back .pp-flip-step b{background:var(--accent-ink);color:var(--accent)}
.pp-flip-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;padding:14px 0 0;border:0;background:none;color:var(--accent-text);font:700 13px/1.4 Manrope,'Segoe UI',sans-serif;cursor:pointer}
.pp-flip-toggle[hidden]{display:none}
.pp-flip-toggle svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-flip-back .pp-flip-toggle{color:var(--accent-ink)}
.product-page .pp-flip-back .pp-flip-toggle:focus-visible{outline-color:var(--accent-ink)}
.pp-flips.is-flippable .pp-flip{perspective:1400px}
.pp-flips.is-flippable .pp-flip-inner{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.pp-flips.is-flippable .pp-flip-face{grid-area:1/1;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pp-flips.is-flippable .pp-flip-back{transform:rotateY(180deg)}
.pp-flips.is-flippable .pp-flip.is-flipped .pp-flip-inner{transform:rotateY(180deg)}
@media(prefers-reduced-motion:reduce){
 .pp-flips.is-flippable .pp-flip-inner{transition:none}
 .pp-flips.is-flippable .pp-flip.is-flipped .pp-flip-inner{transform:none}
 .pp-flips.is-flippable .pp-flip-face{backface-visibility:visible;-webkit-backface-visibility:visible}
 .pp-flips.is-flippable .pp-flip-back{transform:none;display:none}
 .pp-flips.is-flippable .pp-flip.is-flipped .pp-flip-front{display:none}
 .pp-flips.is-flippable .pp-flip.is-flipped .pp-flip-back{display:flex}
}

/* How it works: the homepage's schematic road and lorry, driving from step to step under the tabs. */
.pp-road{position:relative;height:38px;margin:0 0 20px;border-radius:19px;background:var(--raised)}
.pp-road[hidden]{display:none}
.pp-road::before{content:"";position:absolute;left:19px;right:19px;top:50%;border-top:1.5px dashed var(--line)}
.pp-road-stop{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 3px var(--line)}
.pp-road-stop.is-on{box-shadow:inset 0 0 0 3px var(--accent-text)}
.pp-road-lorry{position:absolute;left:0;top:50%;width:58px;height:28px;margin:-14px 0 0 -29px;overflow:visible}
@media(max-width:700px){.pp-road{display:none}}

/* Sample screen details inside the steps. */
.pp-avatar{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;margin-right:10px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-size:11px;font-weight:800;line-height:1}
.pp-avatar.is-truck{border-radius:6px;background:var(--soft);color:var(--text)}
.pp-mock dt:has(.pp-avatar){display:flex;align-items:center}
.pp-mail{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:10px 12px;border-radius:8px;background:var(--accent-soft)}
.pp-mail .pp-avatar{margin:0;background:var(--surface)}
.product-page .pp-mail p{flex:1;min-width:0;margin:0;font-size:12px;line-height:1.4}
.pp-mail strong{display:block;color:var(--text);font-size:13px}
.product-page .pp-mock-send{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 0;font-size:12px;line-height:1.5}
.pp-mock-button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 14px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800}
.pp-mock-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media print{html.motion-ready .pp-hero-backdrop picture{animation:none}}
@media(prefers-reduced-motion:reduce){.pp-hero-backdrop picture{animation:none}}