/* ==========================================================================
   Platform PREVIEW, section 2 "From Millions of Measurements..." (Figma component set 10379:61129).
   v2, calm layout: three type sizes, one soft surface per panel, borderless columns, one tinted engine
   surface, colour top bar on the active step (doubles as the auto-advance progress line).
   Motion: one focal motion at a time (staggered fade-up on step change, a soft dot gliding along the
   step track, draw-on lines/bars, count-ups). Nothing loops.
   >=992px: heading, steps, panel and strip fit in one viewport below the fixed header
   (platform-preview-flow.js sets --pf-hdr, --pff-rowh and, only as a last resort, --fit).
   ========================================================================== */
.pf-flow {
	--ease: cubic-bezier(.22, 1, .36, 1);
	--t1: clamp(17px, 1.3vw, 25px);      /* panel title */
	--t2: clamp(13px, .88vw, 16.5px);    /* labels, card titles */
	--t3: clamp(12px, .8vw, 15px);       /* body */
	--mute: rgba(28, 40, 56, .62);
	--hair: rgba(28, 40, 56, .08);
	--soft: #f6f8fc;
	scroll-margin-top: var(--pf-hdr, 84px);
}
.pf-flow .pff-ic { width: 100%; height: 100%; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; display: block; }
.pf-flow svg { overflow: visible; }
.pf-flow .pff-sig { overflow: hidden; }
.pf-flow__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(16px, 2.5vw, 48px); align-items: end; }
.pf-flow__head .pf-text { padding-top: 0; color: var(--mute); }

/* ---------- Step row: one quiet track, no boxes ---------- */
.pff-steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 13%); gap: clamp(8px, .8vw, 16px); margin-top: clamp(12px, 1.8vw, 34px); }
.pff-steps__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, .4vw, 8px); }
.pff-step { position: relative; min-width: 0; display: flex; align-items: center; gap: clamp(8px, .6vw, 12px); padding: clamp(10px, .8vw, 16px) clamp(8px, .7vw, 14px) clamp(8px, .7vw, 14px); background: transparent; border: 0; border-radius: 12px; cursor: pointer; text-align: left; color: var(--ink2); transition: background-color .5s var(--ease); }
.pff-step:hover { background: rgba(28, 40, 56, .03); }
.pff-step.is-on { background: color-mix(in srgb, var(--cb) 70%, #fff); }
.pff-step:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* top bar: grey hairline, colour on the active step; fills left-to-right while auto-advancing */
.pff-step__bar { position: absolute; left: clamp(8px, .7vw, 14px); right: clamp(8px, .7vw, 14px); top: 0; height: 3px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.pff-step__bar i { position: absolute; inset: 0; background: var(--c); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.pff-step.is-on .pff-step__bar i { transform: scaleX(1); }
.pf-flow[data-auto="on"] .pff-step.is-on .pff-step__bar i { transform: scaleX(0); animation: pff-bar var(--pff-dur, 5s) linear forwards; }
.pf-flow[data-paused] .pff-step.is-on .pff-step__bar i { animation-play-state: paused; }
@keyframes pff-bar { to { transform: scaleX(1); } }
.pff-step__ic { flex: none; width: clamp(30px, 2.3vw, 44px); height: clamp(30px, 2.3vw, 44px); padding: clamp(7px, .55vw, 11px); border-radius: 50%; background: var(--cb); transition: background-color .5s var(--ease); }
.pff-step.is-on .pff-step__ic { background: #fff; }
.pff-step__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pff-step b { display: flex; align-items: baseline; gap: 6px; font-size: var(--t2); font-weight: 700; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(28, 40, 56, .7); transition: color .4s; }
.pff-step.is-on b { color: var(--ink2); }
.pff-step__n { font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.pff-step small { display: none; font-size: var(--t3); line-height: 1.35; font-weight: 500; color: var(--mute); }
/* gliding dot on the track: travels to the newly active step */
.pff-ptr { position: absolute; top: -3px; left: var(--px, 10%); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--pc, #1353e9); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc, #1353e9) 16%, transparent); transition: left .9s var(--ease), background-color .9s; pointer-events: none; }
/* Issue Resolved end-cap */
.pff-done { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 8px; align-items: center; padding: clamp(10px, .8vw, 16px) clamp(10px, .8vw, 16px) 0; border-radius: 12px; background: linear-gradient(180deg, #f2faf4, #fff); overflow: hidden; }
.pff-done::before { content: ""; position: absolute; left: clamp(10px, .8vw, 16px); right: clamp(10px, .8vw, 16px); top: 0; height: 3px; border-radius: 3px; background: #58ae6a; opacity: .35; }
.pff-done__ok { width: clamp(20px, 1.5vw, 28px); fill: none; stroke: #58ae6a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pff-done__tx b { display: block; font-size: var(--t2); font-weight: 700; color: #3f8f51; line-height: 1.2; white-space: nowrap; }
.pff-done__tx small { display: block; font-size: var(--t3); font-weight: 500; color: var(--mute); line-height: 1.3; }
.pff-done .pff-spark { grid-column: 1 / -1; align-self: end; width: 100%; height: clamp(12px, 1.4vw, 30px); margin-top: 4px; }
.pff-spark__line { fill: none; stroke: #58ae6a; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- Detail panel: one soft surface ---------- */
.pff-panels { display: grid; margin-top: clamp(10px, 1vw, 20px); }
.pff-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 22px); padding: clamp(14px, 1.3vw, 28px) clamp(16px, 1.6vw, 34px); background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(28, 40, 56, .05), 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -12px rgba(16, 24, 40, .1); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.pff-panel.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.pff-panel:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.pff-panel__head { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.pff-panel__n { flex: none; width: clamp(24px, 1.7vw, 32px); height: clamp(24px, 1.7vw, 32px); border-radius: 50%; background: var(--cb); color: var(--c); font-weight: 800; font-size: var(--t2); display: grid; place-items: center; }
.pff-panel h3 { font-size: var(--t1); font-weight: 750; letter-spacing: -.01em; color: var(--ink2); line-height: 1.2; }
.pff-panel__head p { flex: 1 1 300px; padding-left: clamp(8px, .6vw, 12px); border-left: 1px solid var(--hair); font-size: var(--t3); font-weight: 500; line-height: 1.45; color: var(--mute); }

/* row: borderless columns on a grid, quiet chevrons in between */
.pff-row { display: grid; align-items: stretch; column-gap: clamp(4px, .5vw, 10px); height: var(--pff-rowh, auto); }
.pff-row--1 { grid-template-columns: 1fr auto 1fr auto 1fr; }
.pff-row--2 { grid-template-columns: .8fr auto 2fr auto 1.15fr; }
.pff-row--3 { grid-template-columns: .85fr auto 2fr auto 1fr; }
.pff-row--4 { grid-template-columns: .54fr auto 1.72fr auto .74fr 1.1fr; }
.pff-row--5 { grid-template-columns: .56fr auto 1.86fr auto .66fr 1.02fr; }
.pff-chev { align-self: center; width: clamp(14px, 1.1vw, 20px); color: rgba(28, 40, 56, .25); }
.pff-chev svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pff-card { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, .4vw, 8px); padding: clamp(4px, .5vw, 10px) clamp(4px, .4vw, 8px); text-align: center; overflow: hidden; }
.pff-card h4 { margin: 0; font-size: var(--t2); font-weight: 650; color: var(--ink2); line-height: 1.3; }
.pff-card > p { margin: 0; max-width: 34ch; font-size: var(--t3); line-height: 1.45; font-weight: 500; color: var(--mute); }
.pff-art { flex: 1 1 0; min-height: 30px; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.pff-art > img { height: 100%; max-height: 150px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pff-art > svg { height: 100%; width: 100%; max-height: 70px; }
.pff-cloud { width: auto !important; height: 70% !important; max-height: 90px !important; flex: none; aspect-ratio: 120 / 90; margin-left: -6%; }
.pff-cloud__body { stroke: #6285fb; stroke-width: 2; }
.pff-cloud__link { stroke: #b7c6f6; stroke-width: 1.4; }
.pff-cloud__dot { fill: #1353e9; }
.pff-draw { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pff-art--motor { gap: 6%; }
.pff-art--motor > img { height: 76%; }
.pff-art--motor > svg { height: 50%; width: 34%; }

/* engine: the one tinted surface */
.pff-card--engine { justify-content: flex-start; align-items: stretch; text-align: left; padding: clamp(12px, 1vw, 20px) clamp(14px, 1.2vw, 24px); background: var(--soft); border-radius: 14px; }
.pff-card--engine > p { max-width: none; }
.pff-tiles { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5em), 1fr)); align-content: center; gap: clamp(8px, .8vw, 16px) clamp(12px, 1.2vw, 24px); margin-top: clamp(2px, .4vw, 8px); font-size: var(--t3); }
.pff-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pff-tiles li { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.pff-item__ic { flex: none; width: clamp(28px, 2vw, 38px); height: clamp(28px, 2vw, 38px); padding: clamp(6px, .45vw, 9px); border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.pff-item__tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
.pff-tiles--3 .pff-item__tx { align-self: center; padding: 0; }
.pff-item__tx b { font-size: var(--t3); font-weight: 650; color: var(--ink2); line-height: 1.3; }
.pff-item__tx span { font-size: var(--t3); font-weight: 500; line-height: 1.35; color: var(--mute); }
.pff-bubble { display: grid; place-items: center; width: clamp(48px, 3.6vw, 72px); max-height: 100%; aspect-ratio: 1; border-radius: 50%; background: #eaf1ff; padding: clamp(12px, .9vw, 18px); }

/* checks / equipment */
.pff-equip { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; gap: 8px; }
.pff-equip > img { flex: .7 1 0; min-width: 0; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pff-checks { flex: 1.5 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(4px, .5vw, 9px); }
.pff-checks li { display: flex; align-items: flex-start; gap: 7px; font-size: var(--t3); line-height: 1.35; font-weight: 500; color: var(--ink2); text-align: left; }
.pff-checks .pff-ic { flex: none; width: 1.15em; height: 1.15em; margin-top: .05em; }
.pff-card--issues { align-items: flex-start; text-align: left; justify-content: center; }
.pff-card--issues .pff-checks { flex: none; }
.pff-card--issues h4 { color: #0b7a37; }
.pff-bigok { flex: none; width: clamp(22px, 1.7vw, 32px); height: clamp(22px, 1.7vw, 32px); }
.pff-areas { font-size: var(--t3); font-weight: 600; color: #0b7a37; }
.pff-areas b { font-size: var(--t1); font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 2px; }
.pff-card--equip { align-items: stretch; }
/* dot grid */
.pff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14%; height: 70%; aspect-ratio: 1; max-height: 56px; }
.pff-grid i { border-radius: 50%; background: #e4e6ee; }
.pff-grid i.on { background: #ff7f27; }
/* ranked */
.pff-card--rank { align-items: stretch; text-align: left; justify-content: flex-start; }
.pff-rank { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 3px; }
.pff-rank li { display: flex; align-items: center; gap: 8px; font-size: var(--t3); color: var(--ink2); }
.pff-rank__n { flex: none; }
.pff-rank__bar { flex: 1 1 0; height: 4px; border-radius: 4px; background: #f0f1f6; position: relative; overflow: hidden; }
.pff-rank__bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--rc); opacity: .85; transform-origin: left; transform: scaleX(var(--rs, 1)); transition: transform 1.1s var(--ease) calc(.5s + var(--i) * .1s); }
.pff-rank b { flex: none; min-width: 6.6ch; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* benefit list column: hairline divider instead of a box */
.pff-card--list { justify-content: center; align-items: stretch; text-align: left; margin-left: clamp(6px, .8vw, 16px); padding-left: clamp(14px, 1.3vw, 26px); border-left: 1px solid var(--hair); border-radius: 0; }
.pff-list { display: flex; flex-direction: column; justify-content: space-evenly; gap: clamp(6px, .7vw, 14px); height: 100%; }
.pff-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t3); line-height: 1.35; font-weight: 500; color: var(--mute); }
.pff-list .pff-ic { flex: none; width: 1.35em; height: 1.35em; }
.pff-list li > span { display: flex; flex-direction: column; gap: 1px; }
.pff-list b { font-weight: 650; color: var(--ink2); }
.pff-card--prog .pff-spark { flex: 1 1 0; width: 100%; min-height: 14px; max-height: 56px; }

/* ---------- Strip: plain text row, no box ---------- */
.pf-flow .pff-foot { margin: clamp(10px, 1.1vw, 22px) 0 0 !important; padding: 0 clamp(16px, 1.6vw, 34px) !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 40px); list-style: none; }
.pf-flow .pff-foot li { display: flex; gap: 10px; align-items: flex-start; }
.pff-foot__ic { flex: none; width: clamp(28px, 2vw, 38px); height: clamp(28px, 2vw, 38px); padding: clamp(6px, .45vw, 9px); border-radius: 50%; background: var(--fc); }
.pf-flow .pff-foot li > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-flow .pff-foot b { font-size: var(--t3); font-weight: 650; color: var(--ink2); line-height: 1.3; }
.pf-flow .pff-foot small { font-size: var(--t3); line-height: 1.4; font-weight: 500; color: var(--mute); }

/* ---------- Motion ---------- */
.pf-flow .pff-draw, .pf-flow .pff-spark__line, .pff-done__ok > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pf-flow.pff-js .pff-panel .pff-card, .pf-flow.pff-js .pff-panel .pff-chev, .pf-flow.pff-js .pff-panel .pff-panel__head { opacity: 0; transform: translateY(8px); }
.pf-flow.pff-js .pff-panel.is-play .pff-card, .pf-flow.pff-js .pff-panel.is-play .pff-chev, .pf-flow.pff-js .pff-panel.is-play .pff-panel__head { opacity: 1; transform: none; transition: opacity .7s var(--ease) calc(.08s + var(--i, 0) * .14s), transform .9s var(--ease) calc(.08s + var(--i, 0) * .14s); }
.pf-flow.pff-js .pff-panel.is-play .pff-panel__head { transition-delay: 0s; }
.pf-flow.pff-js .pff-panel.is-play .pff-chev { transition-delay: .3s; }
.pf-flow.pff-js .pff-panel .pff-draw, .pf-flow.pff-js .pff-panel .pff-spark__line { stroke-dashoffset: 1; }
.pf-flow.pff-js .pff-panel.is-play .pff-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s ease-in-out calc(.35s + var(--dl, 0s)); }
.pf-flow.pff-js .pff-panel.is-play .pff-spark__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .7s; }
.pf-flow.pff-js .pff-panel .pff-spark__fill { opacity: 0; }
.pf-flow.pff-js .pff-panel.is-play .pff-spark__fill { opacity: 1; transition: opacity 1s ease 1.3s; }
.pf-flow.pff-js .pff-panel .pff-rank__bar::after { --rs: 0; }
.pf-flow.pff-js .pff-panel.is-play .pff-rank__bar::after { --rs: 1; }
.pf-flow.pff-js .pff-done__ok > *, .pf-flow.pff-js .pff-done .pff-spark__line { stroke-dashoffset: 1; }
.pf-flow.pff-js .pff-done .pff-spark__fill { opacity: 0; }
.pf-flow.pff-js .pff-done.is-play .pff-done__ok > * { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) .2s; }
.pf-flow.pff-js .pff-done.is-play .pff-done__ok path { transition-delay: .6s; }
.pf-flow.pff-js .pff-done.is-play .pff-spark__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .8s; }
.pf-flow.pff-js .pff-done.is-play .pff-spark__fill { opacity: 1; transition: opacity 1s ease 1.6s; }

@media (prefers-reduced-motion: reduce) {
	.pf-flow *, .pf-flow *::before, .pf-flow *::after { animation: none !important; transition: none !important; }
	.pf-flow.pff-js .pff-panel .pff-card, .pf-flow.pff-js .pff-panel .pff-chev, .pf-flow.pff-js .pff-panel .pff-panel__head { opacity: 1 !important; transform: none !important; }
	.pf-flow.pff-js .pff-draw, .pf-flow.pff-js .pff-spark__line, .pf-flow.pff-js .pff-done__ok > * { stroke-dashoffset: 0 !important; }
	.pf-flow.pff-js .pff-spark__fill { opacity: 1 !important; }
	.pf-flow.pff-js .pff-rank__bar::after { --rs: 1 !important; }
	.pff-ptr { display: none; }
}
.pf-flow.pff-measure .pff-panel *, .pf-flow.pff-measure .pff-panel { transform: none !important; transition: none !important; animation: none !important; }

/* ---------- One-viewport fit (>=992px) ---------- */
@media (min-width: 992px) {
	.pf .pf-sec.pf-flow:not(.pf-hero):not(.pf-sec--cta) { padding-top: clamp(8px, 1.4vh, 24px); }
	.pf-flow > .pf-wrap { width: min(1480px, calc(100% - 2 * clamp(20px, 3vw, 96px))); }
	.pf-flow .pf-h2 { font-size: clamp(22px, 1.95vw, 40px); line-height: 1.18; letter-spacing: -.01em; }
	.pf-flow__head .pf-text { font-size: var(--t3); line-height: 1.55; }
	.pff-row { min-height: 0; }
}
/* tall windows: show the Figma step descriptions under every label */
@media (min-width: 1400px) and (min-height: 860px) {
	.pff-step { align-items: flex-start; }
	.pff-step small { display: block; }
}
@media (min-width: 992px) and (max-height: 560px) {
	.pff-steps { margin-top: 8px; }
	.pff-step { padding-top: 8px; padding-bottom: 6px; }
	.pff-panels { margin-top: 8px; }
	.pff-panel { gap: 8px; padding-top: 11px; padding-bottom: 11px; }
	.pf-flow .pff-foot { margin-top: 9px !important; }
	.pf-flow .pf-h2 { font-size: 21px; }
}

/* ---------- Tablet / phone: stacked ---------- */
@media (max-width: 991px) {
	.pf-flow { --t1: 20px; --t2: 15px; --t3: 13.5px; }
	.pf-flow__head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pff-steps { display: block; margin-top: 16px; }
	.pff-done, .pff-ptr { display: none; }
	.pff-steps__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; padding: 4px 2px 6px; -webkit-overflow-scrolling: touch; }
	.pff-step { flex: 0 0 172px; min-height: 52px; scroll-snap-align: center; }
	.pff-panels { margin-top: 10px; }
	.pff-panel { padding: 18px 16px; }
	.pff-panel__head p { flex-basis: 100%; padding-left: 0; border-left: 0; }
	.pff-row { display: flex; flex-direction: column; height: auto !important; gap: 10px; }
	.pff-card { flex: none; width: 100%; }
	.pff-art { flex: none; height: 104px; }
	.pff-chev { transform: rotate(90deg); align-self: center; }
	.pff-tiles, .pff-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; }
	.pff-equip, .pff-checks, .pff-list { flex: none; height: auto; }
	.pff-equip > img { max-height: 110px; }
	.pff-rank { flex: none; gap: 10px; }
	.pff-card--list { margin-left: 0; padding: 14px 4px 0; border-left: 0; border-top: 1px solid var(--hair); }
	.pff-card--prog .pff-spark { flex: none; height: 48px; }
	.pf-flow .pff-foot { grid-template-columns: 1fr; gap: 14px; padding: 0 8px !important; margin-top: 18px !important; }
}
/* v2 polish */
.pff-step:focus:not(:focus-visible), .pff-panel:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.pff-panel:focus:not(:focus-visible) { box-shadow: 0 0 0 1px rgba(28, 40, 56, .05), 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -12px rgba(16, 24, 40, .1); }
.pff-step.is-on { background: color-mix(in srgb, var(--cb) 85%, #fff); }
.pff-done__tx b { white-space: normal; }
.pff-rank__n { width: auto; height: auto; background: none; font-size: var(--t3); font-weight: 700; color: var(--rc); min-width: 1ch; font-variant-numeric: tabular-nums; }
/* end-cap: sparkline sits behind the text so the step row stays one line tall */
.pff-done { display: flex; align-items: center; gap: 8px; padding-bottom: clamp(8px, .7vw, 14px); }
.pff-done .pff-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; margin: 0; opacity: .55; }
.pff-done__ok, .pff-done__tx { position: relative; }
@media (min-width: 992px) and (max-width: 1199px) {
	.pff-steps { grid-template-columns: minmax(0, 1fr) 146px; gap: 6px; }
	.pff-steps__list { gap: 2px; }
	.pff-step { gap: 7px; padding-left: 7px; padding-right: 7px; }
	.pff-step b { letter-spacing: 0; gap: 5px; }
	.pff-step__ic { width: 27px; height: 27px; padding: 6px; }
	.pff-step__bar { left: 7px; right: 7px; }
	.pff-done__ok { width: 18px; flex: none; }
}
.pff-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pff-tiles.pff-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 992px) and (max-width: 1299px) { .pff-row--4 { grid-template-columns: .5fr auto 1.62fr auto .7fr 1.3fr; } }
@media (min-width: 992px) and (max-height: 620px) {
	.pff-card--engine { padding: 10px 14px; gap: 4px; }
	.pff-tiles { gap: 7px 14px; margin-top: 2px; }
	.pff-item__ic { width: 26px; height: 26px; padding: 5px; }
	.pff-tiles li { gap: 8px; }
	.pff-card { padding-top: 2px; padding-bottom: 2px; }
	.pff-list { gap: 6px; }
}
.pff-done .pff-spark { height: 34%; opacity: .45; }