/* ==================================================================
 * bywill.ai r9: section 3 tabbed showcase, example builder, merged tools,
 * diagnostic "Other" fields and mobile polish. Loaded after site-extras.css.
 * ================================================================== */
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/work-sans-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/archivo-latin-wght.woff2") format("woff2"); }

.anchor-alias { display: block; height: 0; overflow: hidden; position: relative; top: -90px; visibility: hidden; }
#services, #examples, #tools { scroll-margin-top: 70px; }

/* ---------------- 03 Services: four tabs (fonts scoped to this section) ---------------- */
.services.cf8 { background: var(--paper); color: var(--ink); font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.cf8-head { margin: 0 auto; max-width: 860px; text-align: center; }
.cf8-head .eyebrow { justify-content: center; margin-bottom: 1.6rem; }
.cf8-head h2 { font-family: "Archivo", "Work Sans", system-ui, sans-serif; font-size: clamp(2.5rem, 5.4vw, 4.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
.cf8-head > p:last-child { color: #55554f; font-size: 1.08rem; line-height: 1.6; margin: 1.1rem auto 0; max-width: 560px; }

.cf8-tabs { display: none; gap: .55rem; justify-content: center; margin: 2.6rem 0 1.4rem; }
.cf8-js .cf8-tabs { display: flex; }
.cf8-tab {
  background: transparent; border: 1.5px solid transparent; border-radius: 8px; color: var(--ink); cursor: pointer; flex: none;
  font: 500 18px/1.2 "Work Sans", system-ui, sans-serif; padding: 10px 24px; transition: background 220ms ease, border-color 220ms ease;
}
.cf8-tab:hover { background: #0f0f0f0d; }
.cf8-tab[aria-selected="true"] { background: #b9e0ad; }
.cf8-tab:focus-visible { outline: 2px solid var(--deep-green); outline-offset: 2px; }

.cf8-panels { margin: 0 auto; max-width: 1240px; }
.cf8-panel {
  background: #e2ded5; border-radius: 16px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin-top: 1.2rem; min-height: 470px; overflow: hidden;
}
.cf8-js .cf8-panel { margin-top: 0; }
.cf8-js .cf8-panel:not(.is-active) { display: none; }
.cf8-copy { align-content: center; background: #ebe8e1; display: grid; gap: 1.1rem; justify-items: start; padding: clamp(2rem, 4vw, 3.6rem); }
.cf8-copy h3 { font-family: "Archivo", "Work Sans", system-ui, sans-serif; font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.18; margin: 0; }
.cf8-copy p { color: #45453f; font-size: 1.05rem; line-height: 1.6; margin: 0; max-width: 34ch; }
.cf8-cta {
  align-items: center; background: var(--green); border-radius: 8px; color: var(--ink); display: inline-flex; font-size: 1rem; font-weight: 600; gap: .5rem;
  margin-top: .4rem; padding: .85rem 1.25rem; text-decoration: none; transition: background 200ms ease, transform 200ms ease;
}
.cf8-cta:hover, .cf8-cta:focus-visible { background: #7fcf6e; transform: translateY(-1px); }
.cf8-cta .icon { transition: transform 200ms ease; }
.cf8-cta:hover .icon { transform: translateX(3px); }
.cf8-stage { align-items: center; display: flex; justify-content: center; padding: clamp(1.6rem, 3.5vw, 3.2rem); }
.cf8-card {
  background: #fff; border: 1.5px solid var(--ink); border-radius: 20px; box-shadow: 10px 10px 0 var(--ink); max-width: 460px; padding: 1.3rem; width: 100%;
}
.cf8-foot { color: #55554f; font-size: 1rem; margin: 1.6rem 0 0; text-align: center; }
.cf8-foot a { align-items: center; color: var(--deep-green); display: inline-flex; font-weight: 600; gap: .35rem; text-underline-offset: 3px; }

/* mock-up shell */
.mk { display: grid; gap: .9rem; font-size: .92rem; }
.mk-bar { align-items: center; border-bottom: 1px solid #0f0f0f1a; color: #6d6d66; display: flex; font-size: .78rem; font-weight: 600; gap: .7rem; padding-bottom: .75rem; }
.mk-dots { display: inline-flex; gap: 5px; }
.mk-dots i { background: #0f0f0f26; border-radius: 50%; height: 8px; width: 8px; }
.mk-logo { align-items: center; display: inline-flex; flex: none; height: 22px; justify-content: center; width: 22px; }
.mk-logo img { height: 20px; object-fit: contain; width: 20px; }
.mk-logo .logo-mark { background: var(--brand, var(--ink)); height: 18px; width: 18px; }

/* Your Business: workflow ending in Approve */
.mk-flow { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; position: relative; }
.mk-flow::before { background: #6cbf5b; border-radius: 2px; bottom: 26px; content: ""; left: 21px; position: absolute; top: 26px; transform-origin: top; width: 2px; }
.mk-step { align-items: center; background: #faf8f2; border: 1px solid #0f0f0f1a; border-radius: 12px; display: flex; gap: .75rem; padding: .7rem .8rem; position: relative; }
.mk-ico { align-items: center; background: #fff; border: 1.5px solid var(--ink); border-radius: 9px; display: grid; flex: none; height: 28px; place-items: center; width: 28px; }
.mk-t { display: grid; flex: 1; line-height: 1.25; min-width: 0; }
.mk-t b { font-weight: 600; }
.mk-t small { color: #6d6d66; font-size: .76rem; }
.mk-ok { background: var(--green); border-radius: 50%; color: var(--ink); display: grid; height: 20px; place-items: center; width: 20px; }
.mk-approve { background: var(--ink); border-radius: 7px; color: #fff; font-size: .8rem; font-weight: 600; padding: .45rem .8rem; }
.mk-sent { align-items: center; background: #b9e0ad; border-radius: 999px; color: var(--deep-green); display: inline-flex; font-size: .82rem; font-weight: 700; gap: .4rem; justify-self: end; padding: .4rem .85rem; }

/* Your Marketing: schedule a post */
.mk-post { align-items: start; background: #faf8f2; border: 1px solid #0f0f0f1a; border-radius: 12px; display: grid; gap: .6rem .75rem; grid-template-columns: 34px 1fr; padding: .8rem; }
.mk-av img { border-radius: 50%; display: block; height: 34px; width: 34px; }
.mk-lines { display: grid; gap: 6px; padding-top: 3px; }
.mk-lines i { background: #0f0f0f1f; border-radius: 4px; height: 8px; }
.mk-lines i:nth-child(2) { width: 86%; }
.mk-lines i:nth-child(3) { width: 58%; }
.mk-media { background: linear-gradient(135deg, #b9e0ad, #6cbf5b); border-radius: 8px; grid-column: 2; height: 64px; }
.mk-chan { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.mk-chan li { align-items: center; border: 1px solid #0f0f0f1a; border-radius: 10px; display: flex; gap: .6rem; padding: .5rem .7rem; }
.mk-chan li > span:not(.mk-logo) { flex: 1; font-weight: 600; }
.mk-chan em { align-items: center; background: #b9e0ad; border-radius: 999px; color: var(--deep-green); display: inline-flex; font-size: .72rem; font-style: normal; font-weight: 700; gap: .3rem; padding: .22rem .55rem; }
.mk-week { color: #6d6d66; display: grid; font-size: .7rem; font-weight: 600; gap: .3rem; grid-template-columns: repeat(5, 1fr); position: relative; text-align: center; }
.mk-week i { background: var(--green); border-radius: 50%; height: 8px; justify-self: center; width: 8px; }
.mk-week .mk-w1 { grid-column: 2; } .mk-week .mk-w2 { grid-column: 3; } .mk-week .mk-w3 { grid-column: 5; }

/* Your Systems: dashboard */
.mk-src { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.mk-src li { align-items: center; border: 1px solid #0f0f0f1a; border-radius: 999px; display: inline-flex; font-size: .76rem; font-weight: 600; gap: .35rem; padding: .25rem .6rem .25rem .35rem; }
.mk-src .mk-logo { height: 18px; width: 18px; }
.mk-src .mk-logo img, .mk-src .mk-logo .logo-mark { height: 15px; width: 15px; }
.mk-chart { background: #faf8f2; border: 1px solid #0f0f0f1a; border-radius: 12px; height: 170px; padding: 14px 14px 10px; position: relative; }
.mk-bars { align-items: end; display: grid; gap: 8%; grid-template-columns: repeat(7, 1fr); height: 100%; }
.mk-bars i { background: #b9e0ad; border-radius: 5px 5px 2px 2px; height: var(--h); transform-origin: bottom; }
.mk-line { inset: 14px 14px 10px; position: absolute; height: calc(100% - 24px); width: calc(100% - 28px); }
.mk-line path { fill: none; stroke: var(--deep-green); stroke-dasharray: 400; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.mk-legend { color: #6d6d66; display: flex; font-size: .74rem; font-weight: 600; gap: 1rem; }
.mk-legend span { align-items: center; display: inline-flex; gap: .35rem; }
.mk-legend i { border-radius: 3px; height: 9px; width: 9px; }
.mk-k1 { background: #b9e0ad; } .mk-k2 { background: var(--deep-green); }

/* Your Teams: course progress */
.mk-course { display: grid; gap: .15rem; margin: 0; }
.mk-course b { font-family: "Archivo", "Work Sans", sans-serif; font-size: 1.1rem; font-weight: 600; }
.mk-course small { color: #6d6d66; font-size: .78rem; }
.mk-mods { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.mk-mods li { align-items: center; background: #faf8f2; border: 1px solid #0f0f0f1a; border-radius: 10px; display: flex; font-weight: 500; gap: .65rem; padding: .55rem .7rem; }
.mk-tick { background: var(--green); border: 1.5px solid var(--green); border-radius: 50%; color: var(--ink); display: grid; flex: none; height: 20px; place-items: center; width: 20px; }
.mk-prog { display: grid; gap: .4rem; }
.mk-prog > span { color: #6d6d66; font-size: .76rem; font-weight: 600; }
.mk-track { background: #0f0f0f14; border-radius: 999px; height: 10px; overflow: hidden; }
.mk-track i { background: var(--green); border-radius: inherit; display: block; height: 100%; transform-origin: left; }

/* animations play when a panel becomes .is-on (finished state is the default) */
@media (prefers-reduced-motion: no-preference) {
  .cf8-panel.is-on .cf8-copy > * { animation: cfUp 520ms cubic-bezier(.2,.7,.2,1) both; }
  .cf8-panel.is-on .cf8-copy > :nth-child(2) { animation-delay: 80ms; }
  .cf8-panel.is-on .cf8-copy > :nth-child(3) { animation-delay: 160ms; }
  .cf8-panel.is-on .cf8-card { animation: cfCard 620ms cubic-bezier(.2,.7,.2,1) both; }

  .is-on .mk-flow::before { animation: cfGrowY 1800ms 300ms ease both; }
  .is-on .mk-step { animation: cfUp 480ms cubic-bezier(.2,.7,.2,1) both; }
  .is-on .mk-s1 { animation-delay: 300ms; } .is-on .mk-s2 { animation-delay: 1000ms; } .is-on .mk-s3 { animation-delay: 1700ms; }
  .is-on .mk-ok { animation: cfPop 360ms cubic-bezier(.3,1.6,.5,1) both; }
  .is-on .mk-s1 .mk-ok { animation-delay: 800ms; } .is-on .mk-s2 .mk-ok { animation-delay: 1500ms; }
  .is-on .mk-approve { animation: cfApprove 900ms 2500ms ease both; }
  .is-on .mk-sent { animation: cfPop 420ms 3300ms cubic-bezier(.3,1.6,.5,1) both; }

  .is-on .mk-post { animation: cfUp 480ms 250ms cubic-bezier(.2,.7,.2,1) both; }
  .is-on .mk-lines i { animation: cfGrowX 600ms ease both; transform-origin: left; }
  .is-on .mk-lines i:nth-child(1) { animation-delay: 600ms; } .is-on .mk-lines i:nth-child(2) { animation-delay: 800ms; } .is-on .mk-lines i:nth-child(3) { animation-delay: 1000ms; }
  .is-on .mk-media { animation: cfFade 500ms 1200ms ease both; }
  .is-on .mk-chan li { animation: cfUp 420ms cubic-bezier(.2,.7,.2,1) both; }
  .is-on .mk-c1 { animation-delay: 1500ms; } .is-on .mk-c2 { animation-delay: 1700ms; } .is-on .mk-c3 { animation-delay: 1900ms; }
  .is-on .mk-chan em { animation: cfPop 380ms cubic-bezier(.3,1.6,.5,1) both; }
  .is-on .mk-c1 em { animation-delay: 2400ms; } .is-on .mk-c2 em { animation-delay: 2800ms; } .is-on .mk-c3 em { animation-delay: 3200ms; }
  .is-on .mk-week i { animation: cfPop 360ms cubic-bezier(.3,1.6,.5,1) both; }
  .is-on .mk-w1 { animation-delay: 2500ms; } .is-on .mk-w2 { animation-delay: 2900ms; } .is-on .mk-w3 { animation-delay: 3300ms; }

  .is-on .mk-src li { animation: cfUp 420ms cubic-bezier(.2,.7,.2,1) both; }
  .is-on .mk-src li:nth-child(1) { animation-delay: 250ms; } .is-on .mk-src li:nth-child(2) { animation-delay: 400ms; } .is-on .mk-src li:nth-child(3) { animation-delay: 550ms; }
  .is-on .mk-bars i { animation: cfGrowY 700ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(800ms + var(--d) * 120ms); }
  .is-on .mk-line path { animation: cfDraw 1600ms 1500ms ease both; }

  .is-on .mk-course { animation: cfUp 420ms 250ms cubic-bezier(.2,.7,.2,1) both; }
  .is-on .mk-mods li { animation: cfUp 420ms cubic-bezier(.2,.7,.2,1) both; }
  .is-on .mk-m1 { animation-delay: 450ms; } .is-on .mk-m2 { animation-delay: 600ms; } .is-on .mk-m3 { animation-delay: 750ms; } .is-on .mk-m4 { animation-delay: 900ms; }
  .is-on .mk-tick { animation: cfTick 380ms both; }
  .is-on .mk-m1 .mk-tick { animation-delay: 1500ms; } .is-on .mk-m2 .mk-tick { animation-delay: 2100ms; } .is-on .mk-m3 .mk-tick { animation-delay: 2700ms; } .is-on .mk-m4 .mk-tick { animation-delay: 3300ms; }
  .is-on .mk-track i { animation: cfProg 2400ms 1300ms cubic-bezier(.4,0,.2,1) both; }
}
/* r10: reduced motion keeps the tab sequence as opacity/colour-only fades (no slide, scale or grow) */
@media (prefers-reduced-motion: reduce) {
  .cf8-panel.is-on .cf8-copy > * { animation: cfFade 420ms ease both; }
  .cf8-panel.is-on .cf8-copy > :nth-child(2) { animation-delay: 80ms; }
  .cf8-panel.is-on .cf8-copy > :nth-child(3) { animation-delay: 160ms; }
  .cf8-panel.is-on .cf8-card { animation: cfFade 500ms ease both; }
  .is-on .mk-flow::before { animation: cfFade 900ms 300ms ease both; }
  .is-on .mk-step { animation: cfFade 420ms ease both; }
  .is-on .mk-s1 { animation-delay: 300ms; } .is-on .mk-s2 { animation-delay: 1000ms; } .is-on .mk-s3 { animation-delay: 1700ms; }
  .is-on .mk-ok { animation: cfFade 300ms ease both; }
  .is-on .mk-s1 .mk-ok { animation-delay: 800ms; } .is-on .mk-s2 .mk-ok { animation-delay: 1500ms; }
  .is-on .mk-approve { animation: cfApproveSoft 900ms 2500ms ease both; }
  .is-on .mk-sent { animation: cfFade 400ms 3300ms ease both; }
  .is-on .mk-post { animation: cfFade 420ms 250ms ease both; }
  .is-on .mk-lines i { animation: cfFade 500ms ease both; }
  .is-on .mk-lines i:nth-child(1) { animation-delay: 600ms; } .is-on .mk-lines i:nth-child(2) { animation-delay: 800ms; } .is-on .mk-lines i:nth-child(3) { animation-delay: 1000ms; }
  .is-on .mk-media { animation: cfFade 500ms 1200ms ease both; }
  .is-on .mk-chan li { animation: cfFade 400ms ease both; }
  .is-on .mk-c1 { animation-delay: 1500ms; } .is-on .mk-c2 { animation-delay: 1700ms; } .is-on .mk-c3 { animation-delay: 1900ms; }
  .is-on .mk-chan em { animation: cfFade 360ms ease both; }
  .is-on .mk-c1 em { animation-delay: 2400ms; } .is-on .mk-c2 em { animation-delay: 2800ms; } .is-on .mk-c3 em { animation-delay: 3200ms; }
  .is-on .mk-week i { animation: cfFade 360ms ease both; }
  .is-on .mk-w1 { animation-delay: 2500ms; } .is-on .mk-w2 { animation-delay: 2900ms; } .is-on .mk-w3 { animation-delay: 3300ms; }
  .is-on .mk-src li { animation: cfFade 400ms ease both; }
  .is-on .mk-src li:nth-child(1) { animation-delay: 250ms; } .is-on .mk-src li:nth-child(2) { animation-delay: 400ms; } .is-on .mk-src li:nth-child(3) { animation-delay: 550ms; }
  .is-on .mk-bars i { animation: cfFade 500ms ease both; animation-delay: calc(800ms + var(--d) * 120ms); }
  .is-on .mk-line { animation: cfFade 900ms 1500ms ease both; }
  .is-on .mk-course { animation: cfFade 400ms 250ms ease both; }
  .is-on .mk-mods li { animation: cfFade 400ms ease both; }
  .is-on .mk-m1 { animation-delay: 450ms; } .is-on .mk-m2 { animation-delay: 600ms; } .is-on .mk-m3 { animation-delay: 750ms; } .is-on .mk-m4 { animation-delay: 900ms; }
  .is-on .mk-tick { animation: cfTick 380ms both; }
  .is-on .mk-m1 .mk-tick { animation-delay: 1500ms; } .is-on .mk-m2 .mk-tick { animation-delay: 2100ms; } .is-on .mk-m3 .mk-tick { animation-delay: 2700ms; } .is-on .mk-m4 .mk-tick { animation-delay: 3300ms; }
  .is-on .mk-track i { animation: cfFade 600ms 1300ms ease both; }
}
@keyframes cfApproveSoft { 0%, 40% { background: var(--ink); } 60%, 100% { background: var(--deep-green); } }
@keyframes cfUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cfFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cfCard { from { box-shadow: 0 0 0 var(--ink); opacity: 0; transform: translate(10px, 10px); } to { box-shadow: 10px 10px 0 var(--ink); opacity: 1; transform: none; } }
@keyframes cfGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cfGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cfPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes cfDraw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes cfProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cfTick { from { background: #fff; border-color: #0f0f0f33; color: transparent; } to { background: var(--green); border-color: var(--green); color: var(--ink); } }
@keyframes cfApprove {
  0% { background: var(--ink); transform: none; }
  40% { background: var(--ink); transform: scale(.92); }
  60%, 100% { background: var(--deep-green); transform: none; }
}
.mk-approve { background: var(--deep-green); }

@media (max-width: 900px) {
  .cf8-head { text-align: left; }
  .cf8-head .eyebrow { justify-content: flex-start; }
  .cf8-head h2 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .cf8-head > p:last-child { margin-left: 0; }
  .cf8-tabs { justify-content: flex-start; margin: 2.2rem -1.2rem 1rem; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 1.2rem .2rem; scroll-padding-inline: 1.2rem; scrollbar-width: none; }
  .cf8-tabs::-webkit-scrollbar { display: none; }
  .cf8-tab { font-size: 16px; padding: 9px 18px; }
  .cf8-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cf8-copy { gap: .8rem; padding: 1.6rem 1.3rem; }
  .cf8-copy h3 { font-size: 22px; }
  .cf8-copy p { font-size: 1rem; }
  .cf8-stage { min-height: 300px; padding: 1.4rem 1.3rem 1.8rem; }
  .cf8-card { box-shadow: 7px 7px 0 var(--ink); padding: 1rem; }
  @keyframes cfCard { from { opacity: 0; transform: translate(7px, 7px); } to { opacity: 1; transform: none; } }
  .cf8-foot { text-align: left; }
}
@media (max-width: 380px) { .mk-chan em { font-size: 0; gap: 0; padding: .3rem; } }

/* ---------------- 04 Examples builder ---------------- */
.examples { background: var(--ink); color: #fff; }
.examples-head { align-items: end; display: grid; gap: 2rem 6vw; grid-template-columns: 2fr 1fr; }
.examples-head > p { color: #ffffffa8; line-height: 1.65; margin: 0; max-width: 470px; }
.bld { margin-top: 3rem; }
.bld-tabs { display: none; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.bld-js .bld-tabs { display: flex; }
.bld-tab { background: transparent; border: 1px solid #ffffff38; border-radius: 999px; color: #fff; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; padding: .6rem 1.1rem; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; }
.bld-tab:hover { border-color: #ffffff80; }
.bld-tab[aria-selected="true"] { background: var(--green); border-color: var(--green); color: var(--ink); }
.bld-tab:focus-visible, .bld-pick:focus-visible, .bld-tool button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bld-panel { border-top: 1px solid #ffffff1f; display: grid; gap: 1.2rem 2.4rem; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); padding: 1.6rem 0; }
.bld-panel > *, .cf8-panel > * { min-width: 0; }
.bld-js .bld-panel { border-top: 0; padding: 0; }
.bld-js .bld-panel:not(.is-active) { display: none; }
.bld-panel-h { font-size: 1.3rem; grid-column: 1 / -1; margin: 0; }
.bld-js .bld-panel-h { display: none; }
.bld-step { align-items: center; color: #ffffffa8; display: flex; font-size: .72rem; font-weight: 800; gap: .55rem; letter-spacing: .12em; margin: 0 0 .8rem; text-transform: uppercase; }
.bld-step b { border: 1px solid #ffffff5c; border-radius: 50%; color: #fff; display: grid; font-size: .62rem; height: 22px; place-items: center; width: 22px; }
.bld-picks { display: none; }
.bld-js .bld-picks { display: block; }
.bld-list { display: grid; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.bld-pick {
  align-items: center; background: transparent; border: 1px solid transparent; border-radius: 10px; color: #ffffffc7; cursor: pointer; display: flex; font: inherit;
  font-size: .92rem; font-weight: 600; gap: .75rem; padding: .7rem .8rem; text-align: left; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; width: 100%;
}
.bld-pick:hover { background: #ffffff0d; color: #fff; }
.bld-pick[aria-pressed="true"] { background: #6cbf5b1f; border-color: #6cbf5b80; color: #fff; }
.bld-pick-n { color: #ffffff59; font-size: .64rem; font-weight: 800; letter-spacing: .1em; }
.bld-pick[aria-pressed="true"] .bld-pick-n { color: var(--green); }
.bld-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-content: start; }
.bld-cards > .bld-step { grid-column: 1 / -1; margin-bottom: 0; }
.bld-js .bld-cards { display: block; }
.bld-js .bld-cards > .bld-step { margin-bottom: .8rem; }
.bld-js .bld-card:not(.is-active) { display: none; }
.bld-card { border: 1px solid #ffffff1f; border-radius: 16px; display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem; position: relative; }
.bld-js .bld-card { min-height: 330px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.bld-card .ex-title { font-size: 1.05rem; margin: 0; }
.bld-js .bld-card .ex-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.bld-js .bld-card .ex-flow { gap: .55rem; }
.bld-js .bld-card .ex-flow li { font-size: .95rem; }
.bld-js .bld-card .ex-out { font-size: 1rem; margin: 0; max-width: 52ch; }
.bld-js .bld-card.is-active { animation: exIn 420ms cubic-bezier(.2,.7,.2,1) both; }
.bld-card .ex-out { margin: 0; }
.bld-tools-l { color: #ffffff8f; font-size: .72rem; font-weight: 700; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.bld-stack { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.bld-tool { align-items: center; border: 1px solid #ffffff24; border-radius: 12px; display: inline-flex; gap: .5rem; padding: .3rem .7rem .3rem .3rem; }
.bld-tool .ex-mark { height: 30px; width: 30px; }
.bld-tool .ex-mark .logo-mark { height: 17px; width: 17px; }
.bld-tool-n { font-size: .82rem; font-weight: 600; }
.ex-mark-img img { height: 19px; object-fit: contain; width: 19px; }
.bld-tool button {
  align-items: center; background: transparent; border: 0; border-radius: 10px; color: inherit; cursor: pointer; display: inline-flex; font: inherit; gap: .5rem;
  margin: -.3rem -.7rem -.3rem -.3rem; padding: .3rem .7rem .3rem .3rem;
}
.bld-tool.is-swap { border-color: #6cbf5b80; border-style: dashed; }
.bld-tool.is-swap:hover { background: #6cbf5b1a; border-style: solid; }
.bld-swap-i { color: var(--green); display: inline-flex; margin-left: .1rem; transition: transform 300ms ease; }
.bld-tool.is-swap:hover .bld-swap-i { transform: rotate(180deg); }
.bld-tool.is-new { animation: cfPop 360ms cubic-bezier(.3,1.6,.5,1) both; }
.bld-hint { color: #ffffff8f; font-size: .8rem; margin: 0; }
.bld-reset { background: none; border: 0; color: var(--green); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.bld-foot { color: #ffffffa8; margin: 2rem 0 0; }
.bld-foot a { align-items: center; color: var(--green); display: inline-flex; font-weight: 700; gap: .35rem; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .examples-head { grid-template-columns: 1fr; }
  .bld { margin-top: 2rem; }
  .bld-tabs { flex-wrap: nowrap; margin: 0 -1.2rem 1.1rem; overflow-x: auto; padding: 0 1.2rem .2rem; scroll-padding-inline: 1.2rem; scrollbar-width: none; }
  .bld-tabs::-webkit-scrollbar { display: none; }
  .bld-tab { flex: none; }
  .bld-panel { grid-template-columns: minmax(0, 1fr); }
  .bld-js .bld-list { display: flex; gap: .4rem; margin: 0 -1.2rem; overflow-x: auto; padding: 0 1.2rem .3rem; scroll-padding-inline: 1.2rem; scroll-snap-type: x proximity; scrollbar-width: none; }
  .bld-js .bld-list::-webkit-scrollbar { display: none; }
  .bld-js .bld-list li { flex: none; scroll-snap-align: start; }
  .bld-js .bld-pick { border-color: #ffffff24; white-space: nowrap; }
  .bld-js .bld-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .bld-js .bld-card.is-active, .bld-tool.is-new { animation: cfFade 300ms ease both; } .bld-swap-i { transition: none; } }

/* ---------------- 05 Tools (merged AI stack + tools) ---------------- */
.tools .stack-map { margin: 2.6rem 0 .6rem; }
.tool-logo-img img { display: block; height: 24px; object-fit: contain; width: 24px; }

/* ---------------- Diagnostic: Other + mobile ---------------- */
.dx-other { display: grid; gap: .35rem; margin-top: .7rem; }
.dx-other[hidden] { display: none; }
.dx-other > span { font-size: .82rem; font-weight: 700; }
.dx-other input { background: #fff; border: 1.5px solid #0f0f0f40; border-radius: 10px; font: inherit; font-size: 16px; min-height: 48px; padding: .7rem .9rem; width: 100%; }
.dx-other input:focus { border-color: var(--deep-green); outline: 2px solid #6cbf5b66; outline-offset: 1px; }
.dx-opt-other .dx-opt-text > span { font-style: normal; }
@media (max-width: 600px) {
  .dx .dx-card { border-radius: 16px; }
  .dx .dx-body { padding-left: 1rem; padding-right: 1rem; }
  .dx .dx-opts, .dx .dx-opts-wide { grid-template-columns: 1fr; }
  .dx .dx-opt-body { min-height: 48px; }
  .dx .dx-q { font-size: 1.45rem; line-height: 1.2; }
  .dx .dx-row { grid-template-columns: 1fr; }
  .dx .dx-field input, .dx .dx-field textarea { font-size: 16px; }
  .dx .dx-actions { flex-direction: column; align-items: stretch; }
  .dx .dx-actions .dx-btn { justify-content: center; width: 100%; }
  .dx .dx-hint { display: none; }
  .dx .dx-progress-l { font-size: .68rem; }
}
/* the chat bubble steps aside while the diagnostic is on screen */
.bw-root .bw-bubble { transition: opacity 250ms ease, transform 250ms ease; }
html.dx-onscreen .bw-root .bw-bubble { opacity: 0; pointer-events: none; transform: translateY(16px); visibility: hidden; }