/* Smart MLM Engine: overall page polish */

/* reading progress */
.eng-progress { position: fixed; inset: 0 0 auto 0; z-index: 1100; height: 3px; pointer-events: none; }
.eng-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--sky), var(--emerald), var(--amber)); }

/* hero numbers */
.eng-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 2.2rem 0 0; padding: 0; max-width: 820px; border: 1px solid var(--border-subtle); border-radius: 20px; overflow: hidden; background: rgba(230,238,248,.04); }
.eng-stats > div { padding: 1rem 1.1rem; border-right: 1px solid var(--border-subtle); }
.eng-stats > div:last-child { border-right: 0; }
.eng-stats dt { order: 2; font: 500 .66rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.eng-stats dd { margin: 0 0 .15rem; font: 700 1.9rem var(--font-head, var(--font-body)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--sky), var(--emerald)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.eng-stats > div { display: flex; flex-direction: column; }
.eng-tagline { margin-bottom: 1.2rem; }

/* chapter nav */
.eng-nav { margin-bottom: 0; }
.eng-nav ul { padding: .1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%); }
.eng-nav a { transition: color .25s, border-color .25s, background .25s, transform .3s var(--ease); }
.eng-nav a.is-active { color: #04101f; border-color: transparent; background: linear-gradient(120deg, var(--sky), var(--emerald)); }
.eng-nav a.is-active b { color: #04101f; }
.eng-nav a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* section rhythm and headings */
#main > section.section-padding { scroll-margin-top: 130px; }
.section-intro { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-intro h2 { max-width: 18ch; text-wrap: balance; }
.section-intro > p { max-width: 52ch; }
.eng-num { display: inline-flex; align-items: center; gap: .6rem; }
.eng-num::after { content: ""; width: 38px; height: 1px; background: linear-gradient(90deg, var(--sky), transparent); }
.eng-sub { display: flex; flex-direction: column; margin-top: clamp(2.4rem, 5vw, 3.4rem); font-size: 1.3rem; letter-spacing: -.015em; }
.eng-sub small { font-size: .9rem; }

/* callout notes */
.eng-note { margin-top: 1.4rem; padding: .9rem 1.1rem; border-left: 3px solid var(--amber); border-radius: 0 12px 12px 0; background: rgba(255,164,27,.07); font-size: .88rem; line-height: 1.6; color: var(--text-secondary); }
.eng-note a { text-decoration: underline; text-underline-offset: 3px; }

/* tables */
.sb-compare-wrap { position: relative; box-shadow: 0 30px 70px -50px rgba(0,0,0,.6); }
.eng-table tbody tr:nth-child(even) { background: rgba(230,238,248,.025); }
.eng-table tbody tr:hover { background: rgba(41,171,226,.07); }
.eng-table thead th { position: sticky; top: 0; }
.eng-table td, .eng-table th { line-height: 1.5; }
.eng-table td:nth-child(2) { color: var(--text-primary); }

/* cards: calmer, consistent */
.eng-card h3 { font-size: 1.08rem; }
.eng-card li { font-size: .88rem; }
.eng-cards { gap: 1.1rem; }

/* flow steps */
.eng-flow li { transition: border-color .3s, transform .4s var(--ease); }
.eng-flow li:hover { border-color: rgba(41,171,226,.5); transform: translateY(-3px); }

/* chips */
.eng-chips li { padding: .42rem .9rem; }

/* worked example */
.eng-sim { border-radius: 24px; padding: clamp(1.2rem, 3vw, 2rem); }
.eng-sim input { min-height: 44px; }
.eng-sim-out b { font-size: 1.35rem; }

/* configurator container breathing room */
#configurator .lv { margin-top: .5rem; }

/* FAQ */
.sb-faq details { transition: background .3s; }
.sb-faq details[open] { background: rgba(41,171,226,.04); }
.sb-faq summary { cursor: pointer; }

/* scroll reveal should not hide content for print */
@media print { .eng-reveal { opacity: 1 !important; transform: none !important; } .eng-nav, .eng-progress, .pvw { display: none !important; } }

@media (max-width: 900px) {
  .eng-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eng-stats > div:nth-child(3) { border-right: 0; }
  .eng-stats > div:nth-child(-n+3) { border-bottom: 1px solid var(--border-subtle); }
  .section-intro h2 { max-width: none; }
}
@media (max-width: 560px) {
  .eng-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.6rem; }
  .eng-stats > div { border-right: 0; border-bottom: 1px solid var(--border-subtle); padding: .8rem .9rem; }
  .eng-stats > div:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
  .eng-stats > div:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .eng-stats dd { font-size: 1.6rem; }
  .eng-nav { top: 56px; }
  .eng-table { min-width: 720px; }
  .sb-compare-wrap::after { content: "Swipe to see more"; position: sticky; left: 0; display: block; padding: .5rem 1rem; font: 500 .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
}
@media (prefers-reduced-motion: reduce) { .eng-progress i { transition: none; } .eng-flow li:hover { transform: none; } }

/* ===== spacing between stacked blocks ===== */
.eng-flow { margin-bottom: 0; }
.eng-flow + .eng-chips,
.eng-flow + .eng-note,
.eng-flow + .eng-sub,
.eng-flow + .eng-cards,
.eng-flow + .sb-compare-wrap,
.eng-cards + .eng-chips,
.eng-cards + .eng-sub,
.eng-cards + .eng-note,
.sb-compare-wrap + .eng-chips,
.sb-compare-wrap + .eng-cards,
.sb-compare-wrap + .eng-note,
.eng-chips + .eng-note { margin-top: clamp(1.4rem, 3vw, 2rem); }
.eng-chips { gap: .55rem; }
.eng-flow li { padding: 1.2rem 1.1rem 1.15rem; }
.eng-flow li:not(:last-child)::after { content: "\203A"; right: -.62rem; top: 1.05rem; width: 1rem; text-align: center; font-size: 1.15rem; line-height: 1; color: var(--text-tertiary); }
.eng-sub + .eng-flow, .eng-sub + .eng-cards, .eng-sub + .sb-compare-wrap, .eng-sub + .eng-layers { margin-top: 0; }
.eng-chips li { line-height: 1.3; }

/* ===== tables: first column matches the row tint ===== */
.eng-table tbody th { background: linear-gradient(rgba(230,238,248,.045), rgba(230,238,248,.045)), var(--bg-body); transition: background .25s; }
body.light-mode .eng-table tbody th { background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)), var(--bg-body); }
.eng-table tbody tr:nth-child(even) th { background: linear-gradient(rgba(230,238,248,.07), rgba(230,238,248,.07)), var(--bg-body); }
body.light-mode .eng-table tbody tr:nth-child(even) th { background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), var(--bg-body); }
.eng-table tbody tr:hover th { background: linear-gradient(rgba(41,171,226,.1), rgba(41,171,226,.1)), var(--bg-body); }
.eng-table tbody th { box-shadow: 1px 0 0 var(--border-subtle); }
.eng-table td { transition: background .25s; }

/* ===== card polish ===== */
.eng-card { display: grid; grid-template-columns: auto 1fr; align-content: start; align-items: center; column-gap: .9rem; row-gap: 0; padding: 1.35rem 1.4rem 1.3rem; background: linear-gradient(165deg, rgba(230,238,248,.06), rgba(230,238,248,.02) 55%); }
body.light-mode .eng-card { background: linear-gradient(165deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); }
.eng-card::before { inset: 0; height: auto; background: radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--tone) 17%, transparent), transparent 62%); transition: opacity .4s; }
.eng-card:hover::before { opacity: 1.4; }
.eng-card > i, .eng-card > img { grid-column: 1; grid-row: 1; width: 44px; height: 44px; margin: 0; border-radius: 13px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent); }
.eng-card > img { box-shadow: none; padding: 2px; }
.eng-card:nth-child(4n+1) > i { background: color-mix(in srgb, var(--sky) 14%, transparent); color: var(--sky); }
.eng-card > h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.06rem; letter-spacing: -.012em; }
.eng-card > p { grid-column: 1 / -1; margin: .9rem 0 0; font-size: .88rem; line-height: 1.55; }
.eng-card > ul { grid-column: 1 / -1; margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--border-subtle); }
.eng-card > p + ul { margin-top: .8rem; }
.eng-card li { padding: .42rem 0 .42rem 1.2rem; font-size: .88rem; line-height: 1.5; }
.eng-card li + li { border-top: 1px dashed color-mix(in srgb, var(--border-subtle) 70%, transparent); }
.eng-card li::before { top: .95rem; width: 6px; height: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 20%, transparent); }
.eng-card li b { color: var(--text-primary); }
.eng-card:hover { transform: translateY(-3px); }
.eng-card:hover > i { transform: rotate(-6deg) scale(1.06); }
.eng-card > i { transition: transform .45s var(--ease); }
@media (max-width: 560px) {
  .eng-card { padding: 1.15rem 1.15rem 1.1rem; column-gap: .75rem; }
  .eng-card > i, .eng-card > img { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .eng-card:hover > i { transform: none; } }

/* hero numbers: centred with the hero, text centred in each cell */
.eng-stats { margin-inline: auto; width: 100%; }
.eng-stats > div { align-items: center; text-align: center; }

/* ===== simplified preview card ===== */
.cf-preview { padding: 1.4rem; }
.cf-preview .cf-big { font-size: clamp(2.2rem, 4.5vw, 3rem); margin: .25rem 0 .1rem; }
.cf-preview .cf-sub { margin: 0 0 1.1rem; font-size: .88rem; }

/* modules: one wrapped row of small chips instead of a tall stack */
.cf-preview .wz-stage { display: block; margin: 0 0 1.1rem; padding: 0; border-radius: 0; background: none; overflow: visible; }
.cf-preview .wz-stage .bd-glow { display: none; }
.cf-preview .wz-stage .bd-stack { display: flex; flex-direction: row; flex-wrap: wrap; gap: .35rem; width: 100%; }
.cf-preview .wz-stage .bd-stack::before { content: "Your engine"; order: -1; flex: 0 0 100%; margin: 0 0 .3rem; font: 500 .66rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.cf-preview .bd-block { display: none; height: auto; margin: 0; padding: .32rem .7rem .32rem .55rem; gap: .4rem; border: 0; border-radius: 999px; background: rgba(230,238,248,.07); font: 500 .76rem var(--font-body); color: var(--text-secondary); opacity: 1; transform: none; overflow: visible; }
.cf-preview .bd-block.is-on { display: inline-flex; height: auto; margin: 0; opacity: 1; animation: cf-pop .35s var(--ease); }
.cf-preview .bd-block i { width: auto; font-size: .72rem; }

/* meter: no box, one clean line */
.cf-preview .bd-meter { grid-template-columns: 1fr; gap: .45rem; margin: 0 0 1.1rem; padding: 0; border: 0; background: none; }
.cf-preview .bd-meter > div:first-child, .cf-preview .bd-meter > div:last-child { display: flex; justify-content: space-between; align-items: baseline; }
.cf-preview .bd-meter > div:first-child { order: 0; }
.cf-preview .bd-meter .bd-bar { order: 1; }
.cf-preview .bd-meter > div:last-child { order: 2; }
.cf-preview .bd-meter small { margin: 0; }
.cf-preview .bd-meter b { font-size: .9rem; }
.cf-preview .wz-hint { margin-top: .6rem; }

@media (max-width: 900px) {
  .cf-preview .wz-stage { display: block; }
  .cf-preview .wz-hint { display: none; }
}

/* ===== preview window: control bar ===== */
.pvw-ctl { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .6rem .7rem; }
.pvw-dots { min-width: 0; flex-wrap: nowrap; justify-content: flex-start; gap: .15rem; overflow: hidden; scrollbar-width: none; }
.pvw-dots::-webkit-scrollbar { display: none; }
.pvw-dots li { flex: 0 1 auto; min-width: 0; }
.pvw-dot { padding: .4rem .65rem .4rem .4rem; }
.pvw-dot span { overflow: hidden; text-overflow: ellipsis; }
.pvw-cfg { grid-column: 1 / -1; padding-top: .6rem; border-top: 1px solid var(--border-subtle); font-size: .72rem; line-height: 1.4; color: var(--text-tertiary); }
/* tighter screens: only the active step keeps its label */
@media (max-width: 1000px) {
  .pvw-dot span { display: none; }
  .pvw-dot[aria-current="true"] span { display: inline; }
}
@media (max-width: 720px) {
  .pvw-ctl { grid-template-columns: auto auto minmax(0, 1fr); }
  .pvw-cfg { display: block; }
}

/* ===== preview sheet: calmer focus, denser wallets ===== */
.pvw-win:focus { outline: none; }
.pvw-x:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.pvw-x:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (max-width: 720px) {
  .pvw-wallets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .pvw-w { padding: .8rem .85rem; }
  .pvw-w b { font-size: 1.15rem; }
  .pvw-w em { font-size: .7rem; }
}

/* ================= 50/50 layout + capped summary height ================= */
.cf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cf-side { top: 110px; }
.cf-preview { display: flex; flex-direction: column; max-height: calc(100vh - 140px); min-height: 0; }
.cf-preview .wz-stage .bd-stack { max-height: 150px; overflow-y: auto; scrollbar-width: thin; }
.cf-preview .wz-feats { flex: 1 1 auto; min-height: 120px; max-height: 360px; overflow-y: auto; padding-right: .3rem; margin-bottom: 1.1rem; scrollbar-width: thin; scrollbar-color: rgba(230,238,248,.25) transparent; }
.cf-preview .bd-meter, .cf-preview .cf-big, .cf-preview .cf-sub { flex: none; }
@media (max-width: 900px) {
  .cf { grid-template-columns: minmax(0, 1fr); }
  .cf-preview { max-height: none; }
  .cf-preview .wz-feats { max-height: 280px; }
}

/* ================= Fixed button positions ================= */
.cf-panel { display: flex; flex-direction: column; min-height: 640px; }
.cf-panel > .cf-next { margin-top: auto; padding-top: 1.6rem; position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: .8rem; width: 100%; }
.cf-panel > .cf-next::before { content: ""; position: absolute; inset: 0 -1px -1rem; z-index: -1; background: linear-gradient(to top, var(--bg-body, #060b16) 60%, transparent); pointer-events: none; }
.cf-next .wz-back, .cf-next .cf-reset { flex: none; }
.cf-next .cf-nextbtn { flex: none; min-width: 200px; justify-content: center; margin: 0 0 0 auto; }
.cf-next .cf-reset { order: 1; margin-left: .2rem; }
.cf-next .wz-previewbtn { order: 2; }
.cf-next .wz-back { order: 0; }
@media (max-width: 900px) {
  .cf-panel { min-height: 0; }
  .cf-panel > .cf-next { position: static; }
  .cf-panel > .cf-next::before { display: none; }
  .cf-next .cf-nextbtn { min-width: 0; flex: 1 1 auto; }
}

/* ================= Options panel max height ================= */
.cf-panel { min-height: 520px; max-height: max(520px, calc(100vh - 220px)); overflow-y: auto; overscroll-behavior: contain; padding-right: .5rem; scrollbar-width: thin; scrollbar-color: rgba(230,238,248,.25) transparent; }
@media (max-width: 900px) { .cf-panel { max-height: none; overflow: visible; min-height: 0; padding-right: 0; } }

/* ================= One card: options | summary, buttons in footer ================= */
.wz-card { border: 1px solid var(--border-subtle); border-radius: 28px; background: linear-gradient(160deg, rgba(230,238,248,.07), rgba(230,238,248,.025)); overflow: hidden; margin-bottom: 3rem; }
.wz-card .cf.wz { gap: 0; margin: 0; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wz-card .cf-main { padding: 1.6rem 1.8rem 1.4rem; }
.wz-card .cf-side { position: static; padding: 1.6rem 1.8rem 1.4rem; border-left: 1px solid var(--border-subtle); background: rgba(230,238,248,.025); }
.wz-card .cf-preview { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; max-height: none; }
.wz-card .cf-panel { min-height: 0; max-height: max(480px, calc(100vh - 340px)); }
.wz-card .cf-preview .wz-feats { max-height: max(300px, calc(100vh - 560px)); }
.wz-foot { display: flex; align-items: center; padding: 1rem 1.8rem; border-top: 1px solid var(--border-subtle); background: rgba(6,11,22,.35); }
.wz-foot .cf-next { display: flex; align-items: center; gap: .8rem; width: 100%; margin: 0; padding: 0; position: static; }
.wz-foot .cf-next::before { display: none; }
.wz-foot .wz-back { order: 0; }
.wz-foot .cf-reset { order: 1; }
.wz-foot .cf-nextbtn { order: 2; flex: none; min-width: 200px; justify-content: center; margin: 0 0 0 auto; }
@media (max-width: 900px) {
  .wz-card { border-radius: 22px; }
  .wz-card .cf.wz { grid-template-columns: minmax(0, 1fr); }
  .wz-card .cf-main, .wz-card .cf-side { padding: 1.2rem; }
  .wz-card .cf-side { border-left: 0; border-top: 1px solid var(--border-subtle); order: 1; }
  .wz-card .cf-panel { max-height: none; }
  .wz-foot { padding: .9rem 1.2rem; }
  .wz-foot .cf-nextbtn { min-width: 0; flex: 1 1 auto; }
}

/* ================= Stages in the card header ================= */
.wz-head { padding: .9rem 1.8rem 0; border-bottom: 1px solid var(--border-subtle); background: rgba(6,11,22,.35); }
.wz-head .cf-tabs { margin: 0; border-bottom: 0; gap: .25rem; }
.wz-head .cf-tab { padding-bottom: 1rem; }
.wz-card .cf-main { padding-top: 1.6rem; }
@media (max-width: 900px) { .wz-head { padding: .7rem 1.2rem 0; } .wz-head .cf-tabs { margin: 0 -1.2rem; padding: 0 1.2rem; } }

/* ================= Card fits the viewport ================= */
@media (min-width: 901px) {
  .wz-card { display: flex; flex-direction: column; height: clamp(560px, calc(100vh - 130px), 860px); }
  .wz-card .wz-head, .wz-card .wz-foot { flex: none; }
  .wz-card .cf.wz { flex: 1 1 auto; min-height: 0; }
  .wz-card .cf-main, .wz-card .cf-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .wz-card .cf-panel { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  .wz-card .cf-preview { flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; }
  .wz-card .cf-preview .wz-feats { flex: 1 1 0; min-height: 0; max-height: none; }
  .wz-card .cf-preview .wz-stage .bd-stack { max-height: 110px; }
}

/* ================= Preview button lives in the footer ================= */
.wz-foot .wz-previewbtn { order: 2; margin: 0 0 0 auto; min-width: 190px; }
.wz-foot .wz-nextbtn { order: 3; margin: 0; min-width: 190px; }
.wz-foot .cf-reset { order: 1; }
@media (max-width: 900px) {
  .wz-foot .cf-next { flex-wrap: wrap; }
  .wz-foot .wz-previewbtn, .wz-foot .wz-nextbtn { flex: 1 1 140px; min-width: 0; }
}

/* ================= Meter lives in the footer ================= */
.wz-foot { gap: 1.6rem; }
.wz-foot .bd-meter { flex: 0 0 270px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .8rem; margin: 0; padding: 0; border: 0; background: none; }
.wz-foot .bd-meter > div { display: contents; }
.wz-foot .bd-meter small { margin: 0; font: 500 .66rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.wz-foot .bd-meter b { font-size: .85rem; text-align: right; }
.wz-foot .bd-meter .bd-bar { grid-column: 1 / -1; grid-row: 2; order: 0; height: 6px; }
.wz-foot .bd-meter > div:first-child small { grid-row: 1; grid-column: 1; }
.wz-foot .bd-meter > div:first-child b { grid-row: 1; grid-column: 2; }
.wz-foot .bd-meter > div:last-child small { grid-row: 3; grid-column: 1; }
.wz-foot .bd-meter > div:last-child b { grid-row: 3; grid-column: 2; }
.wz-navhost { flex: 1 1 auto; min-width: 0; }
@media (max-width: 900px) {
  .wz-foot { flex-direction: column; align-items: stretch; gap: 1rem; }
  .wz-foot .bd-meter { flex: none; }
}
.wz-foot .bd-meter > .bd-bar { display: block; position: relative; width: 100%; height: 6px; border-radius: 999px; background: rgba(230,238,248,.12); overflow: hidden; }
.wz-foot .bd-meter > .bd-bar > i { display: block; height: 100%; border-radius: inherit; }

/* ================= Your engine: single line ================= */
.wz-card .cf-preview .wz-stage .bd-stack { flex-wrap: nowrap; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: .35rem; scrollbar-width: thin; scrollbar-color: rgba(230,238,248,.25) transparent; }
.wz-card .cf-preview .wz-stage .bd-stack::before { display: none; }
.wz-card .cf-preview .bd-block.is-on { flex: none; white-space: nowrap; }
.wz-card .cf-preview .wz-stage::before { content: "Your engine"; display: block; margin: 0 0 .4rem; font: 500 .66rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }

/* "Your engine" chips repeat the module headings in the feature list below */
.wz-card .cf-preview .wz-stage { display: none !important; }

/* ================= Compact payout header ================= */
.wz-card .cf-preview .cf-k { font-size: .62rem; }
.wz-card .cf-preview .cf-big { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: .1rem 0 0; line-height: 1.1; }
.wz-card .cf-preview .cf-sub { margin: 0 0 .8rem; font-size: .8rem; }
.wz-card .cf-main, .wz-card .cf-side { padding-top: 1.2rem; }

/* feature chips: true vertical centering */
.wz-feat li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 .7rem 0 .55rem; line-height: 1; gap: .4rem; }
.wz-feat li i { display: inline-grid; place-items: center; flex: none; width: 12px; height: 12px; margin: 0; line-height: 1; font-size: .62rem; }
.wz-feat li > :not(i) { line-height: 1; }

/* ================= Software preview polish ================= */
.pvw-win { border-radius: 28px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(230,238,248,.04); }
.pvw-bar { gap: .8rem; padding: .75rem 1.1rem; background: rgba(6,11,22,.55); }
.pvw-role { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvw-role::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgba(18,183,106,.18); animation: pvw-live 1.8s ease-in-out infinite; }
@keyframes pvw-live { 50% { box-shadow: 0 0 0 7px rgba(18,183,106,0); } }
.pvw-x { flex: none; border-radius: 12px; transition: background .25s, transform .25s var(--ease); }
.pvw-x:hover { transform: rotate(90deg); }
.pvw-body { display: grid; align-content: center; background: radial-gradient(circle at 85% -10%, rgba(41,171,226,.16), transparent 55%), radial-gradient(circle at 5% 110%, rgba(18,183,106,.12), transparent 55%), var(--bg-body); }
.pvw-scene.is-on { display: block; animation: pvw-scene .45s var(--ease) both; }
@keyframes pvw-scene { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.pvw-card { width: 100%; max-width: 580px; min-height: 340px; padding: 1.6rem; border-radius: 24px; background: linear-gradient(165deg, rgba(230,238,248,.08), rgba(230,238,248,.025)); box-shadow: 0 30px 60px -36px rgba(0,0,0,.7); }
.pvw-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font: 500 .66rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.pvw-eyebrow i { font-size: .4rem; color: var(--sky); }
.pvw-card h4 { margin: 0 0 1.1rem; font-size: 1.3rem; }
.pvw-field { padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--border-subtle); background: rgba(230,238,248,.04); }
.pvw-field b { text-align: right; }
.pvw-chips span, .pvw-badges span { border-radius: 10px; }
.pvw-btn { padding: .95rem; border-radius: 16px; box-shadow: 0 12px 28px -14px rgba(41,171,226,.7); }
.pvw-ok { border-radius: 18px; }
.pvw-w { border-radius: 18px; border: 1px solid rgba(41,171,226,.22); }
.pvw-toast { border-radius: 14px; }
.pvw-table { border-radius: 16px; }
.pvw-row { padding: .7rem 0; }
.pvw-step i { border-radius: 10px; }
.pvw-ctl { background: rgba(6,11,22,.55); padding: .9rem 1.1rem; }
.pvw-play, .pvw-replay { border-radius: 14px; }
.pvw-dot { border-radius: 12px; }
.pvw-dot i { border-radius: 7px; }
@media (max-width: 720px) {
  .pvw-win { border-radius: 26px 26px 0 0; }
  .pvw-body { align-content: start; }
  .pvw-card { min-height: 0; padding: 1.15rem; border-radius: 20px; }
  .pvw-role { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) { .pvw-scene.is-on, .pvw-role::before { animation: none; } }

/* ================= Preview optimisation: stable size, faster reveal ================= */
.pvw-win { height: min(660px, 92dvh); contain: layout paint; }
.pvw-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pvw-a { animation-delay: calc(var(--i, 0) * .28s + .08s); animation-duration: .4s; will-change: opacity, transform; }
.pvw-card { min-height: 0; }
.pvw-cfg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .5rem; }
.pvw-ctl { padding: .7rem 1rem; gap: .5rem .6rem; }
.pvw-play, .pvw-replay { width: 40px; height: 40px; }
@media (max-width: 720px) {
  .pvw-win { height: min(86dvh, 640px); }
  .pvw-bar { padding: .55rem .8rem; }
  .pvw-body { padding: .8rem; }
  .pvw-card { padding: 1rem; }
  .pvw-card h4 { font-size: 1.15rem; margin-bottom: .8rem; }
  .pvw-wallets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvw-play, .pvw-replay { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pvw-a { will-change: auto; } }

/* ================= Configurator Lead Gen CTA ================= */
.wz-side-cta { display: flex; gap: .6rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border-subtle); }
.wz-side-cta .wz-side-wa { flex: 1 1 auto; justify-content: center; }
.wz-side-cta .wz-side-copy { flex: none; }
.wz-wa-final { background: #25d366 !important; color: #04101f !important; font-weight: 700; }
.wz-wa-final:hover { filter: brightness(1.1); }
.wz-step-badge { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.wz-step-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(41,171,226,.12); color: var(--sky); font: 600 .7rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.wz-step-name { font: 500 .8rem var(--font-body); color: var(--text-tertiary); }
.pvw-bar-cta { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; background: #25d366; color: #04101f; font: 700 .72rem var(--font-body); text-decoration: none; transition: transform .2s; }
.pvw-bar-cta:hover { transform: scale(1.04); }

/* ================= 5-Layer Stack Architecture Polish ================= */
.eng-layers {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  margin-top: 1.25rem !important;
}

.eng-layers .eng-layer {
  display: grid !important;
  grid-template-columns: 360px 1fr auto !important;
  align-items: center !important;
  gap: 1.6rem !important;
  padding: 1.15rem 1.6rem !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(230,238,248,.06), rgba(230,238,248,.015)) !important;
  box-shadow: 0 10px 30px -15px rgba(0,0,0,.5) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s !important;
}

.eng-layers .eng-layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--layer-accent, var(--sky));
  opacity: .75;
  transition: width .25s, opacity .25s;
}

.eng-layers .eng-layer:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 45px -15px rgba(0,0,0,.6) !important;
}

.eng-layers .eng-layer:hover::before {
  width: 6px;
  opacity: 1;
}

/* Layer Themes */
.eng-layers .eng-layer[data-layer="1"] {
  --layer-accent: var(--sky);
}
.eng-layers .eng-layer[data-layer="1"]:hover {
  border-color: rgba(41,171,226,.5) !important;
}

.eng-layers .eng-layer[data-layer="2"] {
  --layer-accent: var(--amber);
}
.eng-layers .eng-layer[data-layer="2"]:hover {
  border-color: rgba(255,164,27,.5) !important;
}

.eng-layers .eng-layer[data-layer="3"] {
  --layer-accent: var(--emerald);
}
.eng-layers .eng-layer[data-layer="3"]:hover {
  border-color: rgba(18,183,106,.5) !important;
}

.eng-layers .eng-layer[data-layer="4"] {
  --layer-accent: #818cf8;
}
.eng-layers .eng-layer[data-layer="4"]:hover {
  border-color: rgba(129,140,248,.5) !important;
}

.eng-layers .eng-layer[data-layer="5"] {
  --layer-accent: var(--coral);
}
.eng-layers .eng-layer[data-layer="5"]:hover {
  border-color: rgba(255,77,94,.5) !important;
}

/* Layer Meta */
.eng-layer-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  min-width: 0 !important;
}

.eng-layer-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  background: rgba(230,238,248,.05);
  border: 1px solid var(--border-subtle);
  color: var(--layer-accent, var(--sky));
  transition: transform .25s var(--ease);
}

.eng-layers .eng-layer:hover .eng-layer-badge {
  transform: scale(1.06);
}

.eng-layer-num {
  font: 700 .62rem var(--font-mono);
  letter-spacing: .08em;
  line-height: 1;
}

.eng-layer-badge i {
  font-size: .88rem;
}

.eng-layer-headings {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.eng-layer-title-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.eng-layer-title {
  font: 700 1.05rem var(--font-body) !important;
  color: var(--text-primary) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.eng-layer-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: .2rem .6rem !important;
  border-radius: 999px !important;
  font: 700 .62rem var(--font-mono) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.eng-layers .eng-layer[data-layer="1"] .eng-layer-tag {
  color: var(--sky) !important;
  background: rgba(41,171,226,.14) !important;
  border: 1px solid rgba(41,171,226,.3) !important;
}

.eng-layers .eng-layer[data-layer="2"] .eng-layer-tag {
  color: var(--amber) !important;
  background: rgba(255,164,27,.14) !important;
  border: 1px solid rgba(255,164,27,.3) !important;
}

.eng-layers .eng-layer[data-layer="3"] .eng-layer-tag {
  color: var(--emerald) !important;
  background: rgba(18,183,106,.14) !important;
  border: 1px solid rgba(18,183,106,.3) !important;
}

.eng-layers .eng-layer[data-layer="4"] .eng-layer-tag {
  color: #a5b4fc !important;
  background: rgba(129,140,248,.14) !important;
  border: 1px solid rgba(129,140,248,.3) !important;
}

.eng-layers .eng-layer[data-layer="5"] .eng-layer-tag {
  color: var(--coral) !important;
  background: rgba(255,77,94,.14) !important;
  border: 1px solid rgba(255,77,94,.3) !important;
}

.eng-layer-scope {
  font: 500 .74rem var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Layer Body */
.eng-layer-body span,
.eng-layer-body p {
  display: block;
  margin: 0;
  font-size: .92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Layer Flow Pip */
.eng-layer-flow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(230,238,248,.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font: 600 .68rem var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  transition: all .25s var(--ease);
}

.eng-layer-flow i {
  font-size: .72rem;
  transition: transform .25s var(--ease);
}

.eng-layers .eng-layer:hover .eng-layer-flow {
  border-color: var(--layer-accent, var(--sky));
  color: var(--layer-accent, var(--sky));
  background: rgba(230,238,248,.08);
}

.eng-layers .eng-layer:hover .eng-layer-flow i {
  transform: translateY(2px);
}

.eng-layer-flow.is-terminal {
  background: rgba(255,77,94,.08);
  border-color: rgba(255,77,94,.25);
  color: var(--coral);
}

/* Light mode overrides */
body.light-mode .eng-layers .eng-layer {
  background: linear-gradient(145deg, #ffffff, #f7fafc) !important;
  border-color: rgba(4,16,31,.1) !important;
  box-shadow: 0 6px 22px -8px rgba(4,16,31,.08) !important;
}

body.light-mode .eng-layer-badge {
  background: rgba(4,16,31,.03);
  border-color: rgba(4,16,31,.1);
}

body.light-mode .eng-layer-scope {
  color: #64748b;
}

body.light-mode .eng-layer-flow {
  background: rgba(4,16,31,.03);
  border-color: rgba(4,16,31,.1);
  color: #64748b;
}

body.light-mode .eng-layer-flow.is-terminal {
  background: #fff1f2;
  border-color: rgba(255,77,94,.3);
  color: #e11d48;
}

/* Responsive adjustments */
@media (max-width: 1040px) {
  .eng-layers .eng-layer {
    grid-template-columns: 310px 1fr auto !important;
    gap: 1.2rem !important;
    padding: 1.1rem 1.3rem !important;
  }
}

@media (max-width: 860px) {
  .eng-layers .eng-layer {
    grid-template-columns: 1fr auto !important;
    gap: 1rem !important;
  }
  .eng-layer-body {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .eng-layers .eng-layer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .8rem !important;
    padding: 1.1rem !important;
  }
  .eng-layers .eng-layer::before {
    width: 100% !important;
    height: 3px !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    border-radius: 4px 4px 0 0 !important;
  }
  .eng-layer-flow {
    align-self: flex-start;
  }
}


/* ================= Income Types Filter Bar ================= */
.eng-filter-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.eng-filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.eng-chip { padding: .4rem .85rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: rgba(230,238,248,.04); color: var(--text-secondary); font: 500 .8rem var(--font-body); cursor: pointer; transition: all .25s var(--ease); display: inline-flex; align-items: center; gap: .35rem; }
.eng-chip:hover { border-color: var(--sky); color: var(--text-primary); }
.eng-chip.is-active { background: linear-gradient(120deg, var(--sky), var(--emerald)); color: #04101f; border-color: transparent; font-weight: 600; }
.eng-search-box { position: relative; min-width: 240px; flex: 1 1 260px; max-width: 380px; }
.eng-search-box i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: .82rem; color: var(--text-tertiary); pointer-events: none; }
.eng-search-input { width: 100%; padding: .55rem .9rem .55rem 2.4rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: rgba(230,238,248,.04); color: var(--text-primary); font: 500 .84rem var(--font-body); transition: border-color .25s; }
.eng-search-input:focus { outline: none; border-color: var(--sky); background: rgba(230,238,248,.07); }
.eng-table-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-secondary); font-size: .95rem; }
.eng-table-empty i { font-size: 1.5rem; margin-bottom: .5rem; display: block; color: var(--text-tertiary); }

/* ================= Binary Simulator Worked Example Polish ================= */
.eng-sim-presets-bar { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.eng-sim-presets-lbl { font: 600 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); display: inline-flex; align-items: center; gap: .35rem; }
.eng-sim-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.eng-sim-preset-btn { padding: .32rem .75rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: rgba(230,238,248,.05); color: var(--text-secondary); font: 500 .78rem var(--font-body); cursor: pointer; transition: all .25s; }
.eng-sim-preset-btn:hover { color: var(--text-primary); border-color: var(--sky); }
.eng-sim-preset-btn.is-active { background: var(--text-primary); color: var(--bg-body); border-color: var(--text-primary); font-weight: 600; }

.eng-sim-legmeter { margin-bottom: 1.4rem; padding: 1.1rem; border-radius: 18px; background: rgba(230,238,248,.03); border: 1px solid var(--border-subtle); }
.eng-sim-legrow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.eng-sim-legcol { display: flex; flex-direction: column; gap: .3rem; }
.eng-leg-lbl { font: 500 .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: .35rem; }
.eng-leg-num { font: 700 1.2rem var(--font-mono); color: var(--text-primary); }
.eng-leg-track { width: 100%; height: 8px; border-radius: 999px; background: rgba(230,238,248,.1); overflow: hidden; position: relative; }
.eng-leg-bar { height: 100%; border-radius: inherit; transition: width .35s var(--ease); }
.eng-leg-bar.left { background: linear-gradient(90deg, var(--sky), #43b8e8); }
.eng-leg-bar.right { background: linear-gradient(90deg, var(--emerald), #32d583); }

.eng-sim-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border-subtle); }
.eng-sim-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font: 600 .76rem var(--font-body); }
.eng-sim-pill.match { background: rgba(18,183,106,.15); color: var(--emerald); border: 1px solid rgba(18,183,106,.3); }
.eng-sim-pill.carry { background: rgba(41,171,226,.14); color: var(--sky); border: 1px solid rgba(41,171,226,.3); }

.eng-sim-capnotice { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 14px; margin-bottom: 1.2rem; font-size: .86rem; }
.eng-sim-capnotice.is-capped { background: rgba(255,164,27,.12); border: 1px solid rgba(255,164,27,.35); color: var(--text-primary); }
.eng-sim-capnotice.is-capped i { color: var(--amber); font-size: 1.2rem; }
.eng-sim-capnotice.is-ok { background: rgba(18,183,106,.12); border: 1px solid rgba(18,183,106,.35); color: var(--text-primary); }
.eng-sim-capnotice.is-ok i { color: var(--emerald); font-size: 1.2rem; }
.eng-sim-capnotice strong { display: block; font-size: .9rem; }
.eng-sim-capnotice span { color: var(--text-secondary); font-size: .82rem; }
.eng-flushed { font-size: .75rem; color: var(--amber); font-weight: 500; font-family: var(--font-body); }

/* ================= Consultation Callout Strip ================= */
.eng-consult-strip { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; margin-top: clamp(1.8rem, 3.5vw, 2.5rem); padding: 1.4rem 1.6rem; border-radius: 20px; background: linear-gradient(135deg, rgba(41,171,226,.1), rgba(18,183,106,.07)); border: 1px solid rgba(41,171,226,.25); }
.eng-consult-text strong { display: block; font-size: 1.05rem; color: var(--text-primary); margin-bottom: .2rem; }
.eng-consult-text span { font-size: .88rem; color: var(--text-secondary); line-height: 1.5; }
.eng-consult-actions { display: flex; gap: .6rem; flex: none; flex-wrap: wrap; }
@media (max-width: 820px) {
  .eng-consult-strip { flex-direction: column; align-items: flex-start; }
  .eng-consult-actions { width: 100%; }
  .eng-consult-actions .btn { flex: 1 1 auto; justify-content: center; }
  .eng-sim-legrow { grid-template-columns: 1fr; gap: .8rem; }
}

/* ================= Floating Global Toast ================= */
.sb-floating-toast { position: fixed; bottom: 2rem; right: 2rem; z-index: 1200; display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.3rem; border-radius: 999px; background: var(--text-primary); color: var(--bg-body); font: 600 .86rem var(--font-body); box-shadow: 0 20px 50px -10px rgba(0,0,0,.7); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.sb-floating-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sb-floating-toast i { color: #12b76a; }

/* Light mode overrides for polished engine components */
body.light-mode .eng-sim-legmeter { background: rgba(0,0,0,.02); }
body.light-mode .eng-search-input { background: rgba(255,255,255,.9); border-color: rgba(4,16,31,.15); color: #04101f; }
body.light-mode .eng-search-input:focus { background: #fff; border-color: var(--sky); }
body.light-mode .eng-chip { background: rgba(0,0,0,.04); color: var(--text-secondary); }
body.light-mode .eng-consult-strip { background: linear-gradient(135deg, rgba(41,171,226,.1), rgba(18,183,106,.08)); border-color: rgba(41,171,226,.28); }

/* ---- Compact: compensation plan anatomy + front end + due diligence cards ---- */
#anatomy .eng-cards, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-cards { gap: .7rem; }
#anatomy .eng-card, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card { padding: .9rem 1rem .8rem; column-gap: .7rem; }
#anatomy .eng-card > i, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card > i { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 11px; font-size: .95rem; align-self: start; }
#anatomy .eng-card > h3, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card > h3 { grid-row: 1; align-self: end; font-size: 1rem; line-height: 1.2; }
#anatomy .eng-card > p, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card > p { grid-column: 2; grid-row: 2; margin: .1rem 0 0; font-size: .8rem; line-height: 1.4; color: var(--text-tertiary, var(--text-secondary)); }
#anatomy .eng-card > ul, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card > ul { margin-top: .6rem; padding-top: .35rem; }
#anatomy .eng-card > p + ul, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card > p + ul { margin-top: .6rem; }
#anatomy .eng-card li, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card li { padding: .22rem 0 .22rem 1rem; font-size: .83rem; line-height: 1.4; }
#anatomy .eng-card li + li, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card li + li { border-top: 0; }
#anatomy .eng-card li::before, #frontend .eng-card, #due-diligence .eng-card, #hosting .eng-card li::before { top: .62rem; width: 5px; height: 5px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 20%, transparent); }
#anatomy .section-intro { margin-bottom: 1.4rem; }
#anatomy .eng-sub, #frontend .eng-sub { margin-top: 1.6rem; }

/* Front end: top-align the split and keep the illustration in view beside the cards */
#frontend .eng-split { align-items: start; }
#frontend .eng-split > div:last-child { position: sticky; top: 110px; }
#frontend .section-intro { margin-bottom: 1.4rem; }
@media (max-width: 900px) { #frontend .eng-split > div:last-child { position: static; } }
#frontend .eng-split .eng-sub { margin-top: 0; }

/* Front end: illustration first, then the three delivered cards in a row */
.eng-fe-art { margin: 0 auto 1.8rem; max-width: 760px; }
.eng-fe-art img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--border-subtle); box-shadow: 0 30px 70px -40px rgba(41,171,226,.6); }
#frontend .eng-fe-art + .eng-sub { margin-top: 0; }

/* Footer: Get Quote sits directly under Preview software */
.wz-foot .wz-stack { order: 2; display: flex; flex-direction: column; gap: .5rem; margin: 0 0 0 auto; min-width: 190px; }
.wz-foot .wz-stack .cf-nextbtn { margin: 0; min-width: 0; width: 100%; }
.wz-foot .wz-quote-under { background: linear-gradient(120deg, #25d366, #12b76a); color: #04101f; }
.wz-side-cta .wz-side-copy { flex: 1 1 auto; justify-content: center; }
@media (max-width: 900px) { .wz-foot .wz-stack { flex: 1 1 140px; min-width: 0; } }

/* Copy Spec on its own: quiet, compact ghost button */
.wz-side-cta { justify-content: center; }
.wz-side-cta .wz-side-copy { flex: 0 0 auto; min-height: 36px; padding: 0 1rem; background: transparent; border: 1px dashed var(--border-subtle); box-shadow: none; font-size: .82rem; color: var(--text-secondary); }
.wz-side-cta .wz-side-copy:hover { border-style: solid; border-color: var(--border-highlight); color: var(--text-primary); background: rgba(41,171,226,.08); }

/* Footer stack: matching button metrics */
.wz-foot .wz-stack .cf-nextbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: 0 1.1rem; font-size: .95rem; font-weight: 600; white-space: nowrap; }
.wz-foot .wz-stack .cf-nextbtn i { margin: 0; }
.wz-foot .wz-nextbtn { align-self: center; }

/* Configurator footer: final polish */
.wz-foot { align-items: center; gap: 1.4rem; padding: .85rem 1.6rem; }
.wz-foot .wz-stack { gap: .45rem; min-width: 220px; }
.wz-foot .wz-stack .wz-previewbtn, .wz-foot .wz-stack .wz-quote-under { border-radius: 14px; box-shadow: none; }
.wz-foot .wz-quote-under:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wz-foot .wz-nextbtn { min-height: 46px; min-width: 190px; border-radius: 14px; font-weight: 600; }
.wz-foot .wz-back { min-height: 40px; }
.wz-side-cta { margin-top: .6rem; padding-top: .6rem; }

/* Get Quote + Copy Spec share one line under Preview */
.wz-foot .wz-stack { min-width: 280px; }
.wz-foot .wz-stack-row { display: flex; gap: .45rem; }
.wz-foot .wz-stack-row .cf-nextbtn { flex: 1 1 0; width: auto; padding: 0 .8rem; }
.wz-foot .wz-copy-under { background: transparent; color: var(--text-secondary); border: 1px dashed var(--border-subtle); border-radius: 14px; box-shadow: none; }
.wz-foot .wz-copy-under:hover { border-style: solid; border-color: var(--border-highlight); color: var(--text-primary); background: rgba(41,171,226,.08); }
@media (max-width: 900px) { .wz-foot .wz-stack { min-width: 0; } }

/* Stack order: Preview first, then the Quote + Copy row */
.wz-foot .wz-stack .wz-previewbtn { order: 0; margin: 0; }
.wz-foot .wz-stack .wz-stack-row { order: 1; }

/* Get Quote and Copy Spec each on their own line */
.wz-foot .wz-stack { min-width: 240px; gap: .4rem; }
.wz-foot .wz-stack-row { flex-direction: column; gap: .4rem; }
.wz-foot .wz-stack-row .cf-nextbtn { flex: none; width: 100%; }
.wz-foot .wz-stack .wz-previewbtn, .wz-foot .wz-stack .wz-quote-under { min-height: 42px; }
.wz-foot .wz-stack .wz-copy-under { min-height: 36px; font-size: .85rem; }

/* Preview, Get Quote and Copy Spec all on one line */
.wz-foot .wz-stack { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: .5rem; min-width: 0; }
.wz-foot .wz-stack-row { display: contents; }
.wz-foot .wz-stack .cf-nextbtn,
.wz-foot .wz-stack .wz-previewbtn,
.wz-foot .wz-stack .wz-quote-under,
.wz-foot .wz-stack .wz-copy-under { width: auto; flex: 0 0 auto; min-height: 46px; min-width: 0; padding: 0 1.1rem; font-size: .92rem; }
.wz-foot .wz-stack .wz-previewbtn { order: 0; }
.wz-foot .wz-stack .wz-quote-under { order: 1; }
.wz-foot .wz-stack .wz-copy-under { order: 2; }
@media (max-width: 1100px) { .wz-foot .wz-stack { flex-wrap: wrap; justify-content: flex-end; } }

/* Phones: tidy footer actions (no sticky pill inside the footer; clean grid) */
@media (max-width: 900px) {
  .wz-foot .wz-nav { position: static; padding: 0; margin: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; }
  .wz-foot .cf-next { flex-direction: column; align-items: stretch; gap: .5rem; }
  .wz-foot .wz-stack { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; justify-content: stretch; }
  .wz-foot .wz-stack .wz-previewbtn { grid-column: 1 / -1; }
  .wz-foot .wz-stack .cf-nextbtn { width: 100%; min-height: 46px; justify-content: center; }
  .wz-foot .wz-nextbtn { width: 100%; flex: none; min-height: 48px; margin: 0; }
}

/* Phones: footer content spans the full card width */
@media (max-width: 900px) {
  .wz-foot { align-items: stretch; padding: 1rem 1.1rem 1.1rem; }
  .wz-foot .bd-meter { width: 100%; max-width: none; flex: none; }
  .wz-foot .wz-navhost, .wz-foot .wz-nav, .wz-foot .cf-next { width: 100%; max-width: none; }
}

/* Desktop: Preview / Get Quote / Copy Spec get their own line under the meter + Next row */
@media (min-width: 901px) {
  .wz-foot { flex-wrap: wrap; row-gap: .8rem; }
  .wz-foot .wz-navhost, .wz-foot .wz-nav, .wz-foot .cf-next { display: contents; }
  .wz-foot .wz-nextbtn { order: 3; margin: 0 0 0 auto; }
  .wz-foot .wz-back { order: 1; }
  .wz-foot .cf-reset { order: 2; }
  .wz-foot .wz-stack { order: 9; flex: 1 0 100%; justify-content: flex-end; padding-top: .8rem; border-top: 1px solid var(--border-subtle); }
}

/* ---- Preview modal polish ---- */
/* Stepper: connectors line up with the circles, glow is never clipped */
.pvw-steps { align-items: flex-start; gap: .5rem; padding: 0 .5rem .2rem; }
.pvw-steps u { margin-top: 13px; background: linear-gradient(90deg, var(--emerald), var(--border-subtle)); opacity: .55; }
.pvw-step { min-width: 64px; line-height: 1.25; }
.pvw-step span { white-space: nowrap; }
/* Header: keep the status label readable, CTA and close aligned */
.pvw-bar { align-items: center; }
.pvw-bar-cta { margin-left: 0; flex: none; }
.pvw-role { flex: 1 1 auto; margin-left: 0; }
.pvw-url + .pvw-role { margin-left: auto; }
/* Table: stronger header, comfortable rows */
.pvw-table { background: rgba(230,238,248,.03); }
@media (max-width: 720px) {
  .pvw-bar { gap: .55rem; padding: .65rem .8rem; }
  .pvw-role { font-size: .62rem; letter-spacing: .06em; }
  .pvw-card { padding: 1rem 1rem 1.1rem; }
  /* Controls: play/replay + config on row 1, step dots get a full row */
  .pvw-ctl { grid-template-columns: auto auto minmax(0, 1fr); row-gap: .6rem; padding: .75rem .9rem .85rem; }
  .pvw-cfg { grid-column: 3; grid-row: 1; padding: 0; border: 0; text-align: right; font-size: .7rem; }
  .pvw-dots { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; overflow: visible; gap: .3rem; }
  .pvw-dots li { flex: 1 1 0; }
  .pvw-dots li:has(> [aria-current="true"]) { flex: 2.4 1 0; }
  .pvw-dot { width: 100%; justify-content: center; padding: .4rem .3rem; }
  .pvw-dot[aria-current="true"] span { max-width: 100%; }
}

/* ================= Configurator: mobile ================= */
.wz-side-mobile { display: none; }
@media (max-width: 900px) {
  /* Quote + Copy live in the summary on phones; the footer keeps only the core actions */
  .wz-side-mobile { display: flex; gap: .5rem; margin: .2rem 0 1rem; padding: 0; border: 0; }
  .wz-side-mobile .btn { flex: 1 1 0; min-height: 44px; justify-content: center; margin: 0; }
  .wz-foot .wz-stack-row { display: none; }

  /* Sticky action bar: progress on top, Back / Preview / Next below */
  .wz-card { overflow: clip; }
  .wz-foot {
    position: sticky; bottom: 0; z-index: 8; display: flex; flex-direction: column; align-items: stretch; gap: .6rem;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-body) 94%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-subtle); box-shadow: 0 -14px 30px -18px rgba(0,0,0,.7);
  }
  .wz-foot .bd-meter { display: flex; align-items: center; gap: .6rem; width: 100%; }
  .wz-foot .bd-meter > div:first-child { display: flex; align-items: baseline; gap: .4rem; flex: none; }
  .wz-foot .bd-meter > div:last-child { display: none; }
  .wz-foot .bd-meter small { font-size: .62rem; }
  .wz-foot .bd-meter b { font-size: .85rem; }
  .wz-foot .bd-meter .bd-bar { flex: 1 1 auto; grid-column: auto; grid-row: auto; order: 0; }
  .wz-foot .wz-navhost, .wz-foot .wz-nav, .wz-foot .cf-next { display: flex; flex-direction: row; align-items: center; gap: .5rem; width: 100%; }
  .wz-foot .wz-stack { display: contents; }
  .wz-foot .wz-back { order: 0; flex: none; min-width: 48px; min-height: 48px; padding: 0; justify-content: center; font-size: 0; border-radius: 14px; }
  .wz-foot .wz-back i { margin: 0; font-size: 1rem; }
  .wz-foot .wz-stack .wz-previewbtn { order: 1; flex: 1 1 0; min-height: 48px; padding: 0 .8rem; border-radius: 14px; }
  .wz-foot .wz-nextbtn { order: 2; flex: 1.3 1 0; min-height: 48px; min-width: 0; margin: 0; border-radius: 14px; }
  .wz-foot .cf-reset { display: none; }
  .wz-card { margin-bottom: 1.5rem; }
}
@media (max-width: 380px) { .wz-foot .wz-stack .wz-previewbtn { font-size: .85rem; padding: 0 .5rem; } }

/* ================= Verified fixes (headless screenshots) ================= */
/* Sticky footers need the page itself to be the scroller: hidden on body made body a scroll box */
html, body { overflow-x: clip; }

/* Preview: tall scenes start at the top instead of being cut off above the fold */
.pvw-body { align-content: safe center; }
.pvw-win { height: min(760px, 92dvh); }
.pvw-row b, .pvw-tr b, .pvw-total b { white-space: nowrap; }
.pvw-row > span { min-width: 0; }

@media (max-width: 720px) {
  .pvw-win { height: 92dvh; max-height: 92dvh; }
  .pvw-body { align-content: start; padding: .75rem; }
  .pvw-a { animation-delay: calc(var(--i, 0) * .14s + .05s); animation-duration: .3s; }
  /* one compact control row: play, replay, steps (config summary is hidden on phones) */
  .pvw-ctl { display: flex; align-items: center; gap: .4rem; padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); }
  .pvw-cfg { display: none; }
  .pvw-play, .pvw-replay { flex: none; width: 40px; height: 40px; }
  .pvw-dots { flex: 1 1 auto; display: flex; gap: .2rem; justify-content: flex-end; overflow: hidden; }
  .pvw-dots li { flex: 0 0 auto; }
  .pvw-dots li:has(> [aria-current="true"]) { flex: 0 1 auto; min-width: 0; }
  .pvw-dot { width: auto; min-height: 40px; padding: .3rem .35rem; }
  .pvw-dot[aria-current="true"] { padding-right: .6rem; }
  .pvw-dot[aria-current="true"] span { overflow: hidden; text-overflow: ellipsis; }
}

/* Configurator, phones: buttons fit, WhatsApp quote is green everywhere */
.wz-side-mobile .wz-side-wa { background: linear-gradient(120deg, #25d366, #12b76a); color: #04101f; box-shadow: none; }
@media (max-width: 900px) {
  .wz-foot .wz-stack .wz-previewbtn, .wz-foot .wz-nextbtn { flex: 1 1 auto; gap: .4rem; padding: 0 .75rem; font-size: .88rem; white-space: nowrap; }
  .wz-foot .wz-stack .wz-previewbtn i { margin: 0; font-size: .8rem; }
  /* floating page buttons step aside while the configurator bar is on screen */
  html.wz-in-view :is(.sticky-conversion-bar, .sb-top, .whatsapp-float, .back-to-top) { opacity: 0; pointer-events: none; transition: opacity .2s; }
}

/* Phones: compact sticky bar, Preview and Next side by side */
@media (max-width: 900px) {
  .wz-foot { gap: .45rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); }
  .wz-foot .bd-meter small { font-size: .58rem; }
  .wz-foot .bd-meter b { font-size: .78rem; }
  .wz-foot .bd-meter .bd-bar { height: 4px; }
  .wz-foot .wz-navhost, .wz-foot .wz-nav, .wz-foot .cf-next { flex-wrap: nowrap; gap: .4rem; }
  .wz-foot .wz-back { min-width: 42px; min-height: 42px; }
  .wz-foot .wz-stack .wz-previewbtn, .wz-foot .wz-nextbtn { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 .6rem; font-size: .84rem; border-radius: 12px; }
}

/* Chapter bar: docks under the header, slides to the top when the header hides; solid enough to read over content */
.eng-nav, body .eng-nav { top: 80px; transition: top .35s var(--ease); background: color-mix(in srgb, var(--bg-body) 96%, transparent); }
body:has(.header.is-hidden) .eng-nav { top: 0; }
@media (max-width: 900px) {
  .eng-nav, body .eng-nav { top: 80px; padding: .4rem 0; }
  body:has(.header.is-hidden) .eng-nav { top: 0; }
  .eng-nav a { padding: .3rem .7rem; font-size: .76rem; }
}
@media (min-width: 901px) { #hosting .eng-cards .eng-card:first-child { grid-column: span 2; } }

/* ================= Configurator + preview: light mode ================= */
body.light-mode .wz-card { background: linear-gradient(160deg, #fff, rgba(255,255,255,.75)); border-color: rgba(11,20,38,.1); }
body.light-mode .wz-head, body.light-mode .wz-foot { background: rgba(240,245,250,.9); border-color: rgba(11,20,38,.08); }
body.light-mode .wz-card .cf-side { background: rgba(240,245,250,.55); border-color: rgba(11,20,38,.08); }
body.light-mode .wz-foot .bd-meter small { color: #5b6b80; }
body.light-mode .wz-foot .bd-meter b { color: #0b1426; }
body.light-mode .wz-foot .bd-meter .bd-bar, body.light-mode .wz-foot .bd-meter > .bd-bar { background: rgba(11,20,38,.1); }
body.light-mode .wz-foot .wz-stack { border-color: rgba(11,20,38,.08); }
body.light-mode .wz-foot .wz-copy-under, body.light-mode .wz-side-cta .wz-side-copy { color: #33435a; border-color: rgba(11,20,38,.2); }
body.light-mode .wz-foot .wz-copy-under:hover { color: #0b1426; background: rgba(41,171,226,.1); }
body.light-mode .wz-foot .wz-back { color: #33435a; border-color: rgba(11,20,38,.18); }
body.light-mode .wz-tabs .cf-tab b { background: rgba(11,20,38,.08); color: #33435a; }
body.light-mode .wz-tabs .cf-tab[aria-selected="true"] b { background: #0b1426; color: #fff; }
@media (max-width: 900px) { body.light-mode .wz-foot { background: rgba(255,255,255,.94); box-shadow: 0 -14px 30px -18px rgba(11,20,38,.25); } }
/* preview modal keeps its dark "app" look, but the backdrop should match the light page */
body.light-mode .pvw-back { background: rgba(200,212,228,.6); }
body.light-mode .wz-foot .bd-meter { background: none; }
body.light-mode .pvw-win { background: #fff; border-color: rgba(11,20,38,.12); box-shadow: 0 40px 100px -30px rgba(11,20,38,.35); }
body.light-mode .pvw-bar, body.light-mode .pvw-ctl { background: #f2f6fa; border-color: rgba(11,20,38,.08); }
body.light-mode .pvw-url { background: #fff; border: 1px solid rgba(11,20,38,.1); color: #5b6b80; }
body.light-mode .pvw-role { color: #1b7fb0; }
body.light-mode .pvw-x { background: #fff; border: 1px solid rgba(11,20,38,.12); color: #0b1426; }
body.light-mode .pvw-x:hover { background: var(--coral); color: #fff; }
body.light-mode .pvw-replay { background: #fff; border: 1px solid rgba(11,20,38,.12); color: #0b1426; }
body.light-mode .pvw-play { background: #0b1426; color: #fff; }
body.light-mode .pvw-dot { color: #5b6b80; }
body.light-mode .pvw-dot i { background: rgba(11,20,38,.08); color: #33435a; }
body.light-mode .pvw-dot.is-done i { background: rgba(18,183,106,.18); color: #0e8f53; }
body.light-mode .pvw-dot[aria-current="true"] { background: #fff; color: #0b1426; box-shadow: inset 0 0 0 1px rgba(11,20,38,.1); }
body.light-mode .pvw-dot[aria-current="true"] i { background: #0b1426; color: #fff; }
body.light-mode .pvw-cfg { color: #5b6b80; border-color: rgba(11,20,38,.08); }