/* ==========================================================================
   Fixit by BondBoss case study (case-study-6.html). Every selector is scoped
   under .cs--fixit. Accent = Fixit green with a warm amber glow; it decorates
   only (glows, borders, kickers). Chart marks keep the validated --zc tokens.
   ========================================================================== */
.cs--fixit {
  --fx-g: #34c759;
  --fx-g-ink: #5fe08a;
  --fx-amber: #ffb02e;
  --fx-glow-g: rgba(52, 199, 89, .26);
  --fx-glow-a: rgba(255, 166, 48, .2);
  --fx-line: rgba(52, 199, 89, .34);
  --fx-tint: rgba(52, 199, 89, .1);
  --fx-grad: linear-gradient(115deg, #2fd16a 0%, #a6e35a 48%, #ffb02e 100%);
}
[data-theme="light"] .cs--fixit {
  --fx-g-ink: #0e6e33;
  --fx-glow-g: rgba(40, 170, 80, .17);
  --fx-glow-a: rgba(240, 150, 40, .15);
  --fx-line: rgba(17, 128, 60, .3);
  --fx-tint: rgba(17, 128, 60, .08);
  --fx-grad: linear-gradient(115deg, #0f8a3e 0%, #1f9d4c 55%, #b45309 100%);
}

/* shared accents: every heading accent, eyebrow dot and kicker on the page, except inside the
   shared CTA band, which keeps the default ZidTech blue ---------------- */
.cs--fixit .grad-text:not(.cta-final *) { background-image: var(--fx-grad); }
.cs--fixit .eyebrow:not(.cta-final *)::before { background: var(--fx-grad); box-shadow: 0 0 12px var(--fx-glow-g); }
.cs--fixit .icon-tile { background: linear-gradient(145deg, rgba(52, 199, 89, .22), rgba(255, 176, 46, .1)); border-color: var(--fx-line); color: var(--fx-g-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 30px -12px var(--fx-glow-g); }
.cs--fixit .spot::before { background: radial-gradient(520px circle at var(--mx) var(--my), var(--fx-tint), transparent 42%); }
.cs--fixit .fx-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-g-ink); margin: 0 0 12px; }

/* hero ---------------------------------------------------------------- */
.cs--fixit .fx-hero::before { background: conic-gradient(from 200deg, rgba(52, 199, 89, 0), rgba(52, 199, 89, .32), rgba(166, 227, 90, .18), rgba(255, 176, 46, .26), rgba(52, 199, 89, 0)); opacity: .6; }
[data-theme="light"] .cs--fixit .fx-hero::before { opacity: .45; }
.cs--fixit .fx-hero-grid { display: grid; gap: clamp(36px, 5vw, 64px); }
@media (min-width: 1100px) {
  .cs--fixit .fx-hero-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". visual" "copy visual" "foot visual" ". visual"; row-gap: 0; }
  .cs--fixit .fx-hero-copy { grid-area: copy; }
  .cs--fixit .fx-hero-visual { grid-area: visual; align-self: center; }
  .cs--fixit .fx-hero-foot { grid-area: foot; margin-top: 30px; }
}
.cs--fixit .fx-hero .display { font-size: clamp(2.45rem, 1rem + 4vw, 4.8rem); max-width: 14ch; }
.cs--fixit .fx-hero .lead { max-width: 58ch; }
.cs--fixit .fx-hero-foot { padding-top: 24px; border-top: 1px solid var(--line); min-width: 0; }
.cs--fixit .fx-credit { max-width: 60ch; font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.cs--fixit .fx-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cs--fixit .fx-credit + .fx-stores { margin-top: 18px; }
@media (max-width: 1099px) { .cs--fixit .fx-hero-foot { margin-top: calc(-1 * clamp(8px, 2vw, 20px)); } }
/* app identity: icon + availability line (deliberately not styled as store buttons) */
.cs--fixit .fx-app { display: inline-flex; align-items: center; gap: 12px; }
.cs--fixit .fx-app img { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--fx-line); box-shadow: 0 10px 24px -14px var(--fx-glow-g); flex: none; }
.cs--fixit .fx-app b { display: block; font-size: .95rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.cs--fixit .fx-app-s { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .82rem; color: var(--text-2); }
.cs--fixit .fx-app-marks { display: inline-flex; gap: 4px; color: var(--text-3); }
.cs--fixit .fx-app-marks svg { width: 13px; height: 13px; }

.cs--fixit .fx-hero-visual { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 5 / 6; }
.cs--fixit .fx-orb { position: absolute; inset: 8% 2% 4% 6%; border-radius: 50%; background: radial-gradient(circle at 40% 36%, rgba(120, 240, 150, .5), rgba(52, 199, 89, .3) 32%, rgba(10, 60, 30, 0) 64%), radial-gradient(circle at 78% 82%, rgba(255, 176, 46, .42), rgba(255, 176, 46, 0) 52%); filter: blur(34px); opacity: .85; }
[data-theme="light"] .cs--fixit .fx-orb { opacity: .55; }
.cs--fixit .fx-rings { position: absolute; left: 52%; top: 46%; width: 92%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.cs--fixit .fx-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--fx-line); opacity: .5; }
.cs--fixit .fx-rings i:nth-child(2) { inset: 13%; opacity: .38; }
.cs--fixit .fx-rings i:nth-child(3) { inset: 26%; opacity: .26; }
html:not(.no-anim) .cs--fixit .fx-rings i { animation: fxRing 7s var(--ease-io) infinite; }
html:not(.no-anim) .cs--fixit .fx-rings i:nth-child(2) { animation-delay: -2.3s; }
html:not(.no-anim) .cs--fixit .fx-rings i:nth-child(3) { animation-delay: -4.6s; }
@keyframes fxRing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.cs--fixit .fx-ph { position: absolute; margin: 0; }
.cs--fixit .fx-ph .phone { max-width: none; }
.cs--fixit .fx-ph--front { left: 31%; top: 5%; width: 43%; z-index: 3; transform: rotate(-4deg); }
.cs--fixit .fx-ph--back { left: 3%; top: 17%; width: 35%; z-index: 2; transform: rotate(-10deg); }
.cs--fixit .fx-ph--back .phone { filter: saturate(.95) brightness(.92); }
.cs--fixit .phone--bare::before { display: none; }
.cs--fixit .fx-sol { position: absolute; right: 0; bottom: 3%; width: 45%; margin: 0; z-index: 4; transform: rotate(3deg); border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .75), 0 0 0 6px rgba(255, 255, 255, .06); background: #eef2ee; }
[data-theme="light"] .cs--fixit .fx-sol { box-shadow: 0 34px 60px -26px rgba(20, 45, 30, .45), 0 0 0 6px rgba(255, 255, 255, .7); }
.cs--fixit .fx-sol img { width: 100%; height: auto; }
.cs--fixit .fx-sol figcaption { display: block; padding: 5px 10px 6px; border-top: 1px solid rgba(14, 42, 25, .1); background: #e4ebe5; color: #3d5546; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; text-align: center; }
@media (max-width: 640px) { .cs--fixit .fx-sol figcaption { padding: 4px 6px 5px; font-size: 10.5px; letter-spacing: .03em; line-height: 1.2; } }
/* below the two-column hero the visual stacks under the CTAs, where the timer tag read like a third control */
@media (max-width: 1099px) { .cs--fixit .fx-hero-visual .fx-tag--timer { display: none; } }
.cs--fixit .fx-tag { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: var(--r); background: var(--glass-strong); border: 1px solid var(--line-2); box-shadow: var(--shadow-m); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 12px; line-height: 1.25; color: var(--text-2); }
.cs--fixit .fx-tag b { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.cs--fixit .fx-tag svg { flex: none; }
.cs--fixit .fx-tag--timer { left: -3%; top: -2%; }
.cs--fixit .fx-tag--timer svg { width: 34px; height: 34px; rotate: -90deg; }
.cs--fixit .fx-tag--timer circle { fill: none; stroke: var(--line-2); stroke-width: 4; }
.cs--fixit .fx-tag--timer .fx-arc { stroke: var(--fx-g); stroke-linecap: round; stroke-dasharray: 52 60; }
html:not(.no-anim) .cs--fixit .fx-tag--timer .fx-arc { animation: fxArc 4s var(--ease-io) infinite; }
@keyframes fxArc { 0% { stroke-dasharray: 0 60; } 60%, 100% { stroke-dasharray: 52 60; } }
.cs--fixit .fx-tag--pro { left: 1%; bottom: 9%; }
.cs--fixit .fx-tag--pro svg { width: 22px; height: 22px; color: var(--fx-g-ink); }
html:not(.no-anim) .cs--fixit .fx-sol { animation: fxFloat 7s var(--ease-io) infinite; }
html:not(.no-anim) .cs--fixit .fx-tag--pro { animation: fxFloat 8s var(--ease-io) -3s infinite; }
@keyframes fxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 640px) {
  .cs--fixit .fx-ph .phone { padding: 5px; border-radius: 22px; }
  .cs--fixit .fx-ph .phone img { border-radius: 18px; }
  .cs--fixit .fx-ph .phone::before { top: 9px; height: 11px; border-radius: 8px; }
  .cs--fixit .fx-sol { border-radius: var(--r-s); }
  .cs--fixit .fx-tag { padding: 7px 10px 7px 8px; gap: 8px; font-size: 10.5px; border-radius: var(--r-s); }
  .cs--fixit .fx-tag b { font-size: 12px; }
  .cs--fixit .fx-tag--timer svg { width: 26px; height: 26px; }
  .cs--fixit .fx-tag--pro svg { width: 18px; height: 18px; }
}

/* proof strip --------------------------------------------------------- */
.cs--fixit .fx-proof { padding-top: 0; }
.cs--fixit .fx-proof + .section { padding-top: clamp(48px, 6vw, 88px); }
.cs--fixit .fx-stats .stat b { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.9rem); }
.cs--fixit .fx-proof-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.cs--fixit .fx-proof-note svg { width: 14px; height: 14px; margin-top: 3px; flex: none; color: var(--fx-g-ink); }

/* overview: the client's problem + a 30-second glance ------------------- */
.cs--fixit .fx-gl { padding: clamp(20px, 2.4vw, 28px); }
.cs--fixit .fx-gl .fx-k { margin-bottom: 4px; }
.cs--fixit .fx-gl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cs--fixit .fx-gl-grid li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.cs--fixit .fx-gl-grid li:first-child { border-top: 0; }
.cs--fixit .fx-gl-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-s); background: var(--fx-tint); border: 1px solid var(--fx-line); color: var(--fx-g-ink); }
.cs--fixit .fx-gl-ico svg { width: 19px; height: 19px; }
.cs--fixit .fx-gl small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.cs--fixit .fx-gl b { display: block; margin-top: 5px; font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--text); }
.cs--fixit .fx-ar { display: inline-block; margin: 0 .35em; color: var(--fx-g-ink); font-weight: 600; }
@media (min-width: 700px) {
  .cs--fixit .fx-gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .cs--fixit .fx-gl-grid li:nth-child(2) { border-top: 0; }
}

/* journey ------------------------------------------------------------- */
.cs--fixit .fx-journey { overflow: clip; }
.cs--fixit .fx-journey::before { content: ""; position: absolute; z-index: -1; left: -10%; top: 18%; width: 60%; height: 70%; background: radial-gradient(closest-side, var(--fx-glow-g), transparent); filter: blur(40px); opacity: .6; pointer-events: none; }
.cs--fixit .fx-j { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 1024px) { .cs--fixit .fx-j { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } }
.cs--fixit .fx-j-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-l), 0 30px 80px -40px var(--fx-glow-g); background: #07130c; isolation: isolate; }
@media (max-width: 640px) { .cs--fixit .fx-j-stage { aspect-ratio: 4 / 3; } }
.cs--fixit .fx-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
.cs--fixit .fx-scene.is-on { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }
.cs--fixit .fx-sc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html:not(.no-anim) .cs--fixit .fx-scene .fx-sc-img { transform: scale(1.04); transition: transform 6s var(--ease); }
html:not(.no-anim) .cs--fixit .fx-scene.is-on .fx-sc-img { transform: scale(1); }
@media (max-width: 640px) { .cs--fixit .fx-sc-img--snap { object-position: 30% 50%; } }
.cs--fixit .fx-j-count { position: absolute; z-index: 3; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 13px 6px 8px; border-radius: 999px; background: rgba(6, 14, 10, .62); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .78); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.cs--fixit .fx-j-count::after { content: ""; position: absolute; inset: -6px; } /* 44 px hit area */
.cs--fixit .fx-j-count:hover { background: rgba(6, 14, 10, .8); border-color: rgba(95, 224, 138, .5); }
.cs--fixit .fx-j-count:focus-visible { outline: 2px solid var(--fx-g); outline-offset: 3px; }
.cs--fixit .fx-j-count b { color: #fff; font-weight: 500; }
.cs--fixit .fx-j-pp { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(95, 224, 138, .18); color: #5fe08a; }
.cs--fixit .fx-j-pp svg { width: 11px; height: 11px; fill: currentColor; }
.cs--fixit .fx-j-count:not(.is-paused) .fx-j-pp svg + svg, .cs--fixit .fx-j-count.is-paused .fx-j-pp svg:first-child { display: none; }
.cs--fixit .fx-scene:focus-visible { outline: 2px solid var(--fx-g); outline-offset: -4px; }
/* provenance label: ad frames vs. the drawn illustration */
.cs--fixit .fx-src { position: absolute; z-index: 2; right: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(6, 14, 10, .66); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .86); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.cs--fixit .fx-src--bl { right: auto; top: auto; left: 14px; bottom: 12px; background: rgba(14, 42, 25, .08); border-color: rgba(14, 42, 25, .16); color: #2a4a36; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 640px) {
  .cs--fixit .fx-j-count { display: none; }
  .cs--fixit .fx-src { right: 8px; top: 8px; padding: 4px 9px; font-size: 10.5px; letter-spacing: .04em; }
  .cs--fixit .fx-src--bl { right: auto; top: auto; left: 8px; bottom: 8px; }
}

/* html scenes (styled like the Fixit ad frames) */
.cs--fixit .fx-sc { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-rows: 100%; align-items: center; gap: 4%; padding: 0 5% 0 7%; }
.cs--fixit .fx-sc-copy { align-self: center; min-width: 0; }
.cs--fixit .fx-sc--dark { color: #effff3; background: radial-gradient(70% 90% at 82% 18%, rgba(52, 199, 89, .3), transparent 60%), radial-gradient(55% 70% at 6% 104%, rgba(255, 160, 40, .26), transparent 62%), linear-gradient(160deg, #0b2516, #05110a); }
.cs--fixit .fx-sc--light { color: #0e2a19; background: radial-gradient(55% 75% at 12% 18%, rgba(52, 199, 89, .18), transparent 60%), radial-gradient(55% 70% at 92% 104%, rgba(255, 170, 60, .2), transparent 60%), #fbfdfa; }
.cs--fixit .fx-sc-h { font-size: clamp(1.3rem, .5rem + 2.5vw, 2.85rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; }
.cs--fixit .fx-sc-h em { font-style: normal; color: #3ad16a; }
.cs--fixit .fx-sc--light .fx-sc-h em { color: #1d9a49; }
.cs--fixit .fx-sc-phone { height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 4.5% 0; container-type: size; }
.cs--fixit .fx-sc-phone .phone { flex: none; width: auto; height: min(100cqh, 100cqw * 2.1667); max-width: none; aspect-ratio: 9 / 19.5; }
.cs--fixit .fx-areas { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 7px; }
.cs--fixit .fx-areas li { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 11px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); font-size: clamp(10.5px, .55rem + .35vw, 13.5px); font-weight: 500; white-space: nowrap; }
.cs--fixit .fx-areas svg { width: 1.15em; height: 1.15em; color: #4fdc7c; flex: none; }
@media (max-width: 640px) { .cs--fixit .fx-sc { padding: 0 4% 0 5%; gap: 3%; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } .cs--fixit .fx-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: .8em; } .cs--fixit .fx-areas li { padding: 5px 7px; border-radius: 8px; gap: 5px; white-space: normal; line-height: 1.15; font-size: 10.5px; } }

/* phone UI drawn in HTML (sizes follow the phone width) */
.cs--fixit .phone--ui { container-type: inline-size; background: linear-gradient(145deg, #2a3142, #0c0f18 40%, #1b2130); }
.cs--fixit .fx-ui { position: absolute; inset: 8px; border-radius: 27px; overflow: hidden; background: #0b0d0c; color: #f3f6f4; padding: 19cqw 7cqw 6cqw; display: flex; flex-direction: column; font-size: 5.4cqw; }
@media (max-width: 640px) { .cs--fixit .fx-sc-phone .phone { padding: 4px; border-radius: 18px; } .cs--fixit .fx-sc-phone .phone img, .cs--fixit .fx-ui { border-radius: 14px; } .cs--fixit .fx-ui { inset: 4px; } .cs--fixit .fx-sc-phone .phone::before { top: 7px; height: 8px; } }
.cs--fixit .fx-ui-step { display: flex; align-items: center; justify-content: center; gap: 3cqw; margin-bottom: 7cqw; }
.cs--fixit .fx-ui-step i { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; border: .6cqw solid #3a3a3c; font-style: normal; font-size: 4.2cqw; font-weight: 700; color: #8e8e93; }
.cs--fixit .fx-ui-step i.d { background: #34c759; border-color: #34c759; }
.cs--fixit .fx-ui-step i.on { background: #34c759; border-color: #34c759; color: #000; box-shadow: 0 0 0 1.6cqw rgba(52, 199, 89, .22); }
.cs--fixit .fx-ui-k { font-size: 4.4cqw; font-weight: 700; color: #8e8e93; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.cs--fixit .fx-ui-big { font-size: 13cqw; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin: 1cqw 0 3cqw; }
.cs--fixit .fx-ui-big small { font-size: 6cqw; color: #8e8e93; font-weight: 700; }
.cs--fixit .fx-ui-range { position: relative; height: 1.8cqw; border-radius: 2cqw; background: #2c2c2e; margin-bottom: 8cqw; }
.cs--fixit .fx-ui-range i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: #34c759; }
.cs--fixit .fx-ui-range b { position: absolute; top: 50%; width: 6.5cqw; height: 6.5cqw; border-radius: 50%; background: #fff; translate: -50% -50%; box-shadow: 0 0 0 1.2cqw rgba(52, 199, 89, .35); }
.cs--fixit .fx-ui-chips { list-style: none; margin: 3cqw 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2.2cqw; }
.cs--fixit .fx-ui-chips li { display: inline-flex; align-items: center; gap: 1.4cqw; padding: 2cqw 3.2cqw; border-radius: 3cqw; background: #1c1c1e; border: .5cqw solid #2c2c2e; font-size: 4.3cqw; font-weight: 600; color: #d8dbd9; white-space: nowrap; }
.cs--fixit .fx-ui-chips li.is-sel { background: rgba(52, 199, 89, .16); border-color: #34c759; color: #fff; }
.cs--fixit .fx-ui-chips svg { width: 4cqw; height: 4cqw; color: #34c759; stroke-width: 3; }
.cs--fixit .fx-ui-btn { margin-top: auto; display: block; text-align: center; padding: 3.6cqw; border-radius: 99px; background: #34c759; color: #04140a; font-size: 5cqw; font-weight: 800; }

/* step list */
.cs--fixit .fx-j-steps { display: flex; flex-direction: column; gap: 6px; }
.cs--fixit .fx-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: 100%; text-align: left; padding: 14px 16px 15px; border-radius: var(--r); border: 1px solid transparent; color: var(--text-2); overflow: hidden; transition: background-color .4s var(--ease), border-color .4s var(--ease); }
.cs--fixit .fx-step:hover { background: var(--surface); }
.cs--fixit .fx-step:focus-visible { outline: 2px solid var(--fx-g); outline-offset: 2px; }
.cs--fixit .fx-step.is-on { background: linear-gradient(180deg, var(--card-a), var(--card-b)); border-color: var(--line-2); box-shadow: 0 18px 40px -28px var(--fx-glow-g); }
.cs--fixit .fx-step-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-3); padding-top: 3px; }
.cs--fixit .fx-step.is-on .fx-step-n { color: var(--fx-g-ink); }
.cs--fixit .fx-step-b > b { display: block; font-size: 1.04rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.cs--fixit .fx-step-b > span { display: block; margin-top: 4px; font-size: .9rem; line-height: 1.5; }
.cs--fixit .fx-step-b em { font-style: normal; color: var(--text); }
@media (min-width: 1024px) {
  .cs--fixit .fx-j.is-js .fx-j-steps { min-height: var(--fx-steps-h, 0px); }
  .cs--fixit .fx-j.is-js .fx-step:not(.is-on) .fx-step-b > span { display: none; }
  .cs--fixit .fx-j.is-js .fx-step:not(.is-on) { padding-block: 11px; }
}
.cs--fixit .fx-step-bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; }
.cs--fixit .fx-step-bar::after { content: ""; position: absolute; inset: 0; background: var(--fx-grad); transform-origin: left center; transform: scaleX(0); }
.cs--fixit .fx-j.is-run .fx-step.is-on .fx-step-bar::after { animation: fxBar var(--fx-dur, 5s) linear forwards; }
@keyframes fxBar { to { transform: scaleX(1); } }
.cs--fixit .fx-timed { position: relative; display: flex; flex-direction: column; gap: 6px; margin-left: -14px; padding-left: 12px; border-left: 2px solid var(--fx-line); }
@media (max-width: 640px) { .cs--fixit .fx-timed { margin-left: -11px; padding-left: 9px; } }
.cs--fixit .fx-timed-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-g-ink); padding: 4px 0 2px 16px; }
.cs--fixit .fx-timed-l b { color: var(--fx-g-ink); font-weight: 500; text-transform: none; }

/* list layout: phones and reduced motion get one visual per step, nothing hidden behind taps */
.cs--fixit .fx-jl { display: none; list-style: none; margin: 0; padding: 0; gap: 16px; }
.cs--fixit .fx-jl-item { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: 0 24px 60px -40px var(--fx-glow-g); }
.cs--fixit .fx-jl-vis { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #07130c; isolation: isolate; border-bottom: 1px solid var(--line); }
.cs--fixit .fx-jl-txt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 16px 18px 20px; }
.cs--fixit .fx-jl-txt .fx-step-n { color: var(--fx-g-ink); }
.cs--fixit .fx-jl-txt h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--text); }
.cs--fixit .fx-jl-txt p { margin-top: 5px; font-size: .92rem; line-height: 1.55; color: var(--text-2); }
.cs--fixit .fx-jl-txt em { font-style: normal; color: var(--text); }
.cs--fixit .fx-jl-k { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-g-ink); }
.cs--fixit .fx-jl-k b { color: var(--fx-g-ink); font-weight: 500; text-transform: none; }
.cs--fixit .fx-nw { white-space: nowrap; }
.cs--fixit .fx-jl-item.is-timed { border-color: var(--fx-line); }
.cs--fixit .fx-jl-item.is-timed .fx-jl-txt { box-shadow: inset 3px 0 0 var(--fx-g); }
@media (max-width: 767px) {
  .cs--fixit .fx-j, .cs--fixit .fx-j-tap { display: none; }
  .cs--fixit .fx-jl { display: grid; }
}
@media (max-width: 640px) { .cs--fixit .fx-jl-vis { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) {
  .cs--fixit .fx-j, .cs--fixit .fx-j-tap { display: none; }
  .cs--fixit .fx-jl { display: grid; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .cs--fixit .fx-jl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cs--fixit .fx-jl-item:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .cs--fixit .fx-jl-item:last-child .fx-jl-vis { border-bottom: 0; border-right: 1px solid var(--line); }
  .cs--fixit .fx-jl-item:last-child .fx-jl-txt { padding: 24px clamp(20px, 3vw, 40px); }
}

/* engine -------------------------------------------------------------- */
.cs--fixit .fx-e-grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .cs--fixit .fx-e-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } }
.cs--fixit .fx-e-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1024px) { .cs--fixit .fx-e-pipe.is-stick { position: sticky; top: 104px; } }
.cs--fixit .fx-insight { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .93rem; line-height: 1.55; color: var(--text-2); }
.cs--fixit .fx-insight b { color: var(--text); font-weight: 600; }
.cs--fixit .fx-insight svg { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--fx-g-ink); }
.cs--fixit .fx-pipe { list-style: none; margin: 16px 0 0; padding: 0; }
.cs--fixit .fx-pipe li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.cs--fixit .fx-pipe li:last-child { padding-bottom: 0; }
.cs--fixit .fx-pipe-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-s); font-family: var(--font-mono); font-size: 12px; color: var(--fx-g-ink); background: var(--fx-tint); border: 1px solid var(--fx-line); }
.cs--fixit .fx-pipe b { display: block; font-weight: 600; font-size: .98rem; }
.cs--fixit .fx-pipe p { margin-top: 2px; font-size: .9rem; line-height: 1.5; color: var(--text-2); }

.cs--fixit .fx-calc { display: grid; gap: 20px; }
.cs--fixit .fx-calc-head { display: flex; gap: 14px; align-items: flex-start; }
.cs--fixit .fx-calc-head .small { margin-top: 4px; color: var(--text-2); }
.cs--fixit .fx-calc-in label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.cs--fixit .fx-calc-in output { font-family: var(--font-sans); font-size: 1.9rem; font-weight: 500; letter-spacing: -.04em; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums; }
.cs--fixit .fx-calc-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.cs--fixit .fx-calc input[type="range"] { --p: 5.5%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0 0 -4px; background: transparent; cursor: pointer; }
.cs--fixit .fx-calc input[type="range"]:focus-visible { outline: 2px solid var(--fx-g); outline-offset: 4px; border-radius: 8px; }
.cs--fixit .fx-calc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--fx-g) var(--p), var(--surface-3) var(--p)); }
.cs--fixit .fx-calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(52, 199, 89, .35), 0 4px 12px rgba(0, 0, 0, .35); }
.cs--fixit .fx-calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--surface-3); }
.cs--fixit .fx-calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--fx-g); }
.cs--fixit .fx-calc input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(52, 199, 89, .35), 0 4px 12px rgba(0, 0, 0, .35); }
.cs--fixit .fx-calc-out { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs--fixit .fx-calc-out li { padding: 14px 15px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.cs--fixit .fx-calc-out small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-g-ink); }
.cs--fixit .fx-calc-out b { display: block; margin-top: 6px; font-size: 1.7rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cs--fixit .fx-calc-out span { display: block; margin-top: 6px; font-size: .78rem; line-height: 1.4; color: var(--text-3); }

/* platform ------------------------------------------------------------ */
.cs--fixit .fx-roles { display: grid; gap: 14px; }
@media (min-width: 640px) { .cs--fixit .fx-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cs--fixit .fx-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs--fixit .fx-role { padding: 24px; border-radius: var(--r-l); border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-a), var(--card-b)); }
.cs--fixit .fx-role h3 { margin-top: 18px; }
.cs--fixit .fx-role p { margin-top: 8px; font-size: .92rem; line-height: 1.55; color: var(--text-2); }
/* phones: one compact row per role (icon left), 16 px body text */
@media (max-width: 639px) {
  .cs--fixit .fx-roles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cs--fixit .fx-role { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px; border-radius: var(--r); }
  .cs--fixit .fx-role .icon-tile { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--r-s); }
  .cs--fixit .fx-role .icon-tile svg { width: 19px; height: 19px; }
  .cs--fixit .fx-role h3 { margin-top: 0; padding-top: 1px; font-size: 1.05rem; }
  .cs--fixit .fx-role p { margin-top: 3px; font-size: 1rem; line-height: 1.5; }
}

.cs--fixit .fx-life { margin-top: 14px; }
.cs--fixit .fx-life-track { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.cs--fixit .fx-life-track li { position: relative; padding: 0 0 18px 56px; min-height: 58px; }
.cs--fixit .fx-life-track li::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--fx-line); }
.cs--fixit .fx-life-track li:last-child { padding-bottom: 0; }
.cs--fixit .fx-life-track li:last-child::before { display: none; }
.cs--fixit .fx-life-ico { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--fx-line); color: var(--fx-g-ink); box-shadow: 0 0 0 4px var(--fx-tint); }
.cs--fixit .fx-life-ico svg { width: 18px; height: 18px; }
.cs--fixit .fx-life-track b { display: block; font-size: .98rem; font-weight: 600; padding-top: 1px; }
.cs--fixit .fx-life-track li > span:last-child { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.45; color: var(--text-2); }
.cs--fixit .fx-life-track li:last-child .fx-life-ico { background: var(--fx-g); border-color: var(--fx-g); color: #04140a; }
@media (min-width: 768px) {
  .cs--fixit .fx-life-track { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
  .cs--fixit .fx-life-track li { padding: 56px 14px 0 0; min-height: 0; }
  .cs--fixit .fx-life-track li::before { left: 48px; right: 8px; top: 19px; bottom: auto; width: auto; height: 2px; }
  .cs--fixit .fx-life-track li:nth-child(4)::before { display: none; }
}
@media (min-width: 1180px) {
  .cs--fixit .fx-life-track { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cs--fixit .fx-life-track li:nth-child(4)::before { display: block; }
}

.cs--fixit .fx-p-grid { display: grid; gap: 14px; margin-top: 14px; align-items: start; }
@media (min-width: 1024px) { .cs--fixit .fx-p-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.cs--fixit .fx-tl-more { display: grid; gap: 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.cs--fixit .fx-tl-more > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.cs--fixit .fx-tl-more dt { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-g-ink); }
.cs--fixit .fx-tl-more dt svg { width: 14px; height: 14px; color: var(--fx-g-ink); flex: none; }
.cs--fixit .fx-tl-more dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-2); }
@media (max-width: 480px) { .cs--fixit .fx-tl-more > div { grid-template-columns: 1fr; gap: 3px; } }
.cs--fixit .fx-tl > .zc-note { margin-top: 14px; }
.cs--fixit .fx-build .tag { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; }
.cs--fixit .fx-build-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 18px 0 22px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cs--fixit .fx-build-n div { padding: 16px 14px; background: var(--bg-2); }
.cs--fixit .fx-build-n b { display: block; font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.cs--fixit .fx-build-n span { display: block; margin-top: 8px; font-size: .8rem; line-height: 1.35; color: var(--text-2); }
.cs--fixit .fx-build .tags { gap: 6px; }
.cs--fixit .fx-ops { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text-2); line-height: 1.55; }
.cs--fixit .fx-ops svg { width: 16px; height: 16px; margin-top: 4px; flex: none; color: var(--fx-g-ink); }
.cs--fixit .fx-ops a { color: var(--text); text-decoration: underline; text-decoration-color: var(--fx-line); text-underline-offset: 3px; }
.cs--fixit .fx-ops a:hover { text-decoration-color: var(--fx-g); }

/* growth -------------------------------------------------------------- */
.cs--fixit .fx-loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 960px) { .cs--fixit .fx-loop { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } }
.cs--fixit .fx-loop li { position: relative; padding: 20px; border-radius: var(--r-l); border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-a), var(--card-b)); }
.cs--fixit .fx-loop li:not(:last-child)::after { content: ""; position: absolute; left: 30px; bottom: -11px; width: 9px; height: 9px; border-right: 2px solid var(--fx-g); border-bottom: 2px solid var(--fx-g); transform: rotate(45deg); opacity: .8; }
@media (min-width: 960px) { .cs--fixit .fx-loop li:not(:last-child)::after { left: auto; right: -14px; bottom: auto; top: 50%; translate: 0 -50%; transform: rotate(-45deg); } }
@media (min-width: 640px) and (max-width: 959px) {
  .cs--fixit .fx-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs--fixit .fx-loop li:last-child { grid-column: 1 / -1; }
  /* chevrons point right inside a row; row ends rely on reading order */
  .cs--fixit .fx-loop li:nth-child(odd):not(:last-child)::after { left: auto; right: -12px; bottom: auto; top: 50%; translate: 0 -50%; transform: rotate(-45deg); }
  .cs--fixit .fx-loop li:nth-child(even)::after { display: none; }
}
.cs--fixit .fx-loop-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-s); background: var(--fx-tint); border: 1px solid var(--fx-line); color: var(--fx-g-ink); }
.cs--fixit .fx-loop-ico svg { width: 19px; height: 19px; }
.cs--fixit .fx-loop b { display: block; margin-top: 14px; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.cs--fixit .fx-loop li > span:last-child { display: block; margin-top: 5px; font-size: .86rem; line-height: 1.5; color: var(--text-2); }
.cs--fixit .fx-loop-back { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 18px; border-radius: var(--r); border: 1px dashed var(--fx-line); background: var(--fx-tint); color: var(--text-2); font-size: .93rem; line-height: 1.5; }
.cs--fixit .fx-loop-back b { color: var(--text); font-weight: 600; }
.cs--fixit .fx-loop-back svg { width: 20px; height: 20px; flex: none; color: var(--fx-g-ink); }

.cs--fixit .fx-wall { display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .cs--fixit .fx-wall { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); } .cs--fixit .fx-cw--main { grid-row: span 2; } .cs--fixit .fx-cw--main .fx-cw-media { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; } }
.cs--fixit .fx-cw { position: relative; display: flex; flex-direction: column; margin: 0; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow-m); }
.cs--fixit .fx-cw-media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.cs--fixit .fx-cw video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cs--fixit .fx-cw figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 13px 17px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; color: var(--text-3); }
.cs--fixit .fx-cw figcaption b { color: var(--text); font-size: 14px; font-weight: 600; }
.cs--fixit .fx-cw-badge { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(4, 10, 7, .66); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; pointer-events: none; }
.cs--fixit .fx-cw-badge svg { width: 12px; height: 12px; color: #5fe08a; }

.cs--fixit .fx-cw.is-auto .fx-play { display: none; }
/* outcome band + verified facts (same two-column treatment as the rest of the set) */
.cs--fixit .fx-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; background: radial-gradient(70% 120% at 100% 0%, var(--fx-glow-a), transparent 60%), linear-gradient(140deg, rgba(52, 199, 89, .13), rgba(255, 176, 46, .06)); border-color: var(--fx-line); }
@media (min-width: 992px) { .cs--fixit .fx-band { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 48px; } }
.cs--fixit .fx-check { padding: 22px; border-radius: var(--r-l); border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 0; }
.cs--fixit .fx-check-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-g-ink); }
.cs--fixit .fx-check-h svg { width: 14px; height: 14px; flex: none; color: var(--fx-g-ink); }
.cs--fixit .fx-check ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.cs--fixit .fx-check li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); }
.cs--fixit .fx-check li:first-child { border-top: 0; }
.cs--fixit .fx-check li > svg { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--fx-g-ink); }
.cs--fixit .fx-check li b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.cs--fixit .fx-check li span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.cs--fixit .fx-band .outcome-band p, .cs--fixit .fx-band > div > p { max-width: 40ch; }

.cs--fixit .fx-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .35)); }
.cs--fixit .fx-play svg { box-sizing: content-box; width: 22px; height: 22px; padding: 17px 17px 17px 19px; border-radius: 50%; color: #04140a; fill: #04140a; background: #34c759; box-shadow: 0 0 0 8px rgba(52, 199, 89, .22), 0 14px 30px -10px rgba(0, 0, 0, .7); transition: transform .4s var(--spring), box-shadow .4s var(--ease); }
.cs--fixit .fx-play:hover svg, .cs--fixit .fx-play:focus-visible svg { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(52, 199, 89, .26), 0 14px 30px -10px rgba(0, 0, 0, .7); }
.cs--fixit .fx-play:focus-visible { outline: 2px solid var(--fx-g); outline-offset: -4px; border-radius: inherit; }

/* no JS: the list layout (every screen visible) instead of the tab stage */
html:not(.js) .cs--fixit .fx-j, html:not(.js) .cs--fixit .fx-j-tap { display: none; }
html:not(.js) .cs--fixit .fx-jl { display: grid; }
.cs--fixit .fx-j-count[hidden] { display: none; }

/* 44 px touch targets for the small shared controls on this page (crumbs, chart table toggles) */
@media (pointer: coarse), (max-width: 767px) {
  .cs--fixit .fx-hero .crumbs a { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
  .cs--fixit .zc-table summary { display: flex; align-items: center; gap: .3em; min-height: 44px; padding: 0; }
}

/* phones ---------------------------------------------------------------- */
.cs--fixit .fx-jl-wrap { position: relative; }
.cs--fixit .fx-jl-rail { display: none; }
@media (max-width: 640px) {
  /* step 03 illustration: the drawn phone fills the frame and peeks up from the bottom, so its UI type is readable */
  .cs--fixit .fx-jl-vis .fx-sc--light { display: block; padding: 0; }
  .cs--fixit .fx-jl-vis .fx-sc--light .fx-sc-copy { display: none; }
  .cs--fixit .fx-jl-vis .fx-sc--light .fx-sc-phone { position: absolute; left: 50%; top: 14%; width: 64%; height: auto; padding: 0; translate: -50% 0; display: block; container-type: normal; }
  .cs--fixit .fx-jl-vis .fx-sc--light .fx-sc-phone .phone { width: 100%; height: auto; padding: 6px; border-radius: 30px; }
  .cs--fixit .fx-jl-vis .fx-sc--light .fx-ui { inset: 6px; border-radius: 25px; }
  .cs--fixit .fx-jl-vis .fx-sc--light .fx-sc-phone .phone::before { top: 11px; height: 12px; }
  .cs--fixit .fx-jl-vis .fx-src--bl { left: 8px; top: 8px; bottom: auto; z-index: 3; background: #eef3ef; border-color: rgba(14, 42, 25, .22); }
  /* ad-frame labels: the short "Launch ad", bottom-right, where it only meets phone bezels and cropped
     bottom rows (top-right covered app UI on step 04 and the headline on step 05) */
  .cs--fixit .fx-src-x { display: none; }
  .cs--fixit .fx-jl-vis .fx-src:not(.fx-src--bl) { top: auto; bottom: 8px; }

  .cs--fixit .fx-jl-txt { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 16px 16px 20px; }
  .cs--fixit .fx-jl-txt h3 { font-size: 1.1rem; }
  .cs--fixit .fx-jl-txt p, .cs--fixit .fx-pipe p, .cs--fixit .fx-insight, .cs--fixit .fx-tl-more dd, .cs--fixit .fx-loop-back,
  .cs--fixit .fx-calc-head .small, .cs--fixit .fx-ops, .cs--fixit .fx-life-track li > span:last-child { font-size: 1rem; }
  .cs--fixit .fx-check li span, .cs--fixit .fx-proof-note, .cs--fixit .fx-cw figcaption { font-size: 14px; }
  .cs--fixit .fx-cw figcaption b { font-size: 15px; }
  .cs--fixit .fx-calc-out span { font-size: .84rem; }
  .cs--fixit .fx-calc-out small, .cs--fixit .fx-calc-scale { font-size: 11.5px; }

  /* outcome: lighter band, the verified facts sit under a rule instead of a nested card */
  .cs--fixit .fx-band { padding: 24px 18px; gap: 20px; }
  .cs--fixit .fx-band > div > p { font-size: 1.12rem; line-height: 1.45; }
  .cs--fixit .fx-check { padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* growth loop: compact rows joined by a short connector */
@media (max-width: 639px) {
  .cs--fixit .fx-loop { gap: 10px; }
  .cs--fixit .fx-loop li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px; border-radius: var(--r); }
  .cs--fixit .fx-loop-ico { grid-row: span 2; }
  .cs--fixit .fx-loop b { margin-top: 0; padding-top: 1px; }
  .cs--fixit .fx-loop li > span:last-child { margin-top: 3px; font-size: 1rem; }
  .cs--fixit .fx-loop li:not(:last-child)::after { left: 35px; bottom: -11px; width: 2px; height: 10px; border: 0; border-radius: 2px; background: var(--fx-line); transform: none; opacity: 1; transition: background-color .5s var(--ease); }
}
/* "Built to run every job" tiles become rows where three across would squeeze the labels */
@media (max-width: 479px) {
  .cs--fixit .fx-build-n { grid-template-columns: minmax(0, 1fr); }
  .cs--fixit .fx-build-n div { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; }
  .cs--fixit .fx-build-n b { min-width: 2ch; font-size: 1.9rem; }
  .cs--fixit .fx-build-n span { margin-top: 0; font-size: 1rem; }
}
/* scroll motion on phones (.fx-mo is set by cs-fixit.js only when motion is allowed) */
@media (max-width: 767px) {
  .cs--fixit.fx-mo .fx-jl-wrap { --p: 0; padding-left: 22px; }
  .cs--fixit.fx-mo .fx-jl-rail { display: block; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--line-2); }
  .cs--fixit.fx-mo .fx-jl-rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--fx-g), #a6e35a 62%, var(--fx-amber)); transform-origin: top; transform: scaleY(var(--p)); box-shadow: 0 0 10px var(--fx-glow-g); }
  .cs--fixit.fx-mo .fx-jl-rail b { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 10px; height: 10px; border-radius: 50%; translate: -50% -50%; background: var(--fx-g); box-shadow: 0 0 0 4px var(--fx-tint), 0 0 16px var(--fx-glow-g); opacity: calc(min(1, var(--p) * 40)); }
  .cs--fixit.fx-mo .fx-jl-item { transition: border-color .6s var(--ease), box-shadow .6s var(--ease); }
  .cs--fixit.fx-mo .fx-jl-item.is-lit { border-color: var(--fx-line); box-shadow: 0 24px 60px -34px var(--fx-glow-g); }
  .cs--fixit.fx-mo .fx-jl-txt .fx-step-n { color: var(--text-3); transition: color .5s var(--ease), text-shadow .5s var(--ease); }
  .cs--fixit.fx-mo .fx-jl-item.is-lit .fx-step-n { color: var(--fx-g-ink); text-shadow: 0 0 14px var(--fx-glow-g); }

  .cs--fixit.fx-mo .fx-life-track { position: relative; --p: 0; }
  .cs--fixit.fx-mo .fx-life-track::before, .cs--fixit.fx-mo .fx-life-track::after { content: ""; position: absolute; z-index: 0; left: 19px; top: 20px; bottom: 38px; width: 2px; border-radius: 2px; }
  .cs--fixit.fx-mo .fx-life-track::before { background: var(--line-2); }
  .cs--fixit.fx-mo .fx-life-track::after { background: linear-gradient(var(--fx-g), #a6e35a 70%, var(--fx-g)); transform-origin: top; transform: scaleY(var(--p)); box-shadow: 0 0 10px var(--fx-glow-g); }
  .cs--fixit.fx-mo .fx-life-track li::before { display: none; }
  .cs--fixit.fx-mo .fx-life-ico { z-index: 1; color: var(--text-3); border-color: var(--line-2); box-shadow: none; transition: color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease), transform .6s var(--spring); }
  .cs--fixit.fx-mo .fx-life-track li:last-child .fx-life-ico { background: var(--bg-2); border-color: var(--line-2); color: var(--text-3); }
  .cs--fixit.fx-mo .fx-life-track li.is-active .fx-life-ico { color: var(--fx-g-ink); border-color: var(--fx-g); box-shadow: 0 0 0 4px var(--fx-tint), 0 0 22px var(--fx-glow-g); transform: scale(1.06); }
  .cs--fixit.fx-mo .fx-life-track li:last-child.is-active .fx-life-ico { background: var(--fx-g); border-color: var(--fx-g); color: #04140a; box-shadow: 0 0 0 6px var(--fx-tint), 0 0 30px var(--fx-glow-g); transform: scale(1.12); }

  .cs--fixit.fx-mo .fx-loop-ico { color: var(--text-3); background: transparent; border-color: var(--line-2); transition: color .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
  .cs--fixit.fx-mo .fx-loop li.is-active .fx-loop-ico { color: var(--fx-g-ink); background: var(--fx-tint); border-color: var(--fx-line); box-shadow: 0 0 24px -4px var(--fx-glow-g); }
}
@media (max-width: 639px) { .cs--fixit.fx-mo .fx-loop li.is-active:not(:last-child)::after { background: var(--fx-g); } }

/* reduced motion: everything static and visible -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cs--fixit .fx-scene, .cs--fixit .fx-scene .fx-sc-img { transition: none; }
}