/* Builder page v2 */
.bx-hero { padding-block: clamp(40px, 6vw, 96px) clamp(80px, 10vw, 140px); background: radial-gradient(ellipse 45% 60% at 78% 50%, rgba(217, 119, 87, 0.16), transparent 70%), var(--ivory); }
.bx-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.bx-hero-text { display: grid; gap: 22px; min-width: 0; }
.bx-hero h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem); line-height: 1.15; }
.bx-hero h1 em { font-style: normal; color: var(--crail); }
.bx-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.bx-win { position: relative; border-radius: 24px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 50px 90px -50px rgba(20, 20, 19, 0.5), 0 0 0 10px rgba(232, 183, 90, 0.08); overflow: hidden; min-width: 0; }
.bw-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.bw-top .dots { display: flex; gap: 6px; margin-right: 6px; }
.bw-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.bw-top b { font-family: var(--display); font-size: 1rem; }
.bw-top em { font-style: normal; font-size: 0.6875rem; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1px solid var(--crail); color: var(--crail); }
.bw-body { padding: 20px; display: grid; gap: 16px; }
.bw-me { justify-self: end; max-width: 92%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--ivory); font-size: 0.9375rem; line-height: 1.65; min-height: 3.2em; }
.bw-plan { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--pampas); display: grid; gap: 10px; }
.bw-plan li { list-style: none; display: grid; grid-template-columns: 20px auto 1fr; gap: 10px; align-items: center; font-size: 0.9375rem; font-weight: 500; color: var(--cloudy); transition: color .3s; }
.bw-plan li span { font-weight: 400; font-size: 0.8125rem; color: var(--ink-2); text-align: right; opacity: 0; transition: opacity .3s; }
.bw-plan li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); }
.bw-plan li.run { color: var(--ink); }
.bw-plan li.run i { border-color: var(--line); border-top-color: var(--clay); animation: bwspin .7s linear infinite; }
.bw-plan li.ok { color: var(--ink); }
.bw-plan li.ok span { opacity: 1; }
.bw-plan li.ok i { border: 0; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
@keyframes bwspin { to { transform: rotate(360deg); } }
.bw-app { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: var(--ivory); transition: opacity .5s, transform .6s cubic-bezier(.2,1.4,.5,1); position: relative; overflow: hidden; }
.bx-win.playing .bw-app:not(.show) { opacity: 0; transform: scale(.9); }
.bw-app .ap-ic { width: 44px; height: 44px; border-radius: 12px; background: #262624; display: grid; place-items: center; flex: none; }
.bw-app .ap-ic svg { width: 26px; height: 26px; }
.bw-app .ap-tx { display: grid; flex: 1; min-width: 0; }
.bw-app b { font-family: var(--display); font-size: 1.0625rem; }
.bw-app small { font-size: 0.8125rem; color: var(--cloudy); }
.bw-app .ap-st { font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; background: rgba(120, 140, 93, 0.25); color: #c9d4b8; }
.bw-app .ap-st::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9fb585; margin-right: 6px; vertical-align: 1px; }
.bx-win.burst::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 85%, rgba(232, 183, 90, 0.35), transparent 55%); animation: bwburst .9s ease-out forwards; pointer-events: none; }
@keyframes bwburst { from { opacity: 1; } to { opacity: 0; } }

.bx-sh { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 48em; }
.bx-sh h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.3; }
.bx-diff, .bx-steps, .bx-routes, .bx-course { padding-block: clamp(80px, 10vw, 150px); }
.bx-cmp { border-top: 2px solid var(--ink); }
.cr { display: grid; grid-template-columns: 0.8fr 1fr 1.2fr; gap: 24px; padding: 20px 4px; border-bottom: 1px solid var(--line); align-items: baseline; }
.cr > span:first-child { font-size: 0.9375rem; color: var(--ink-2); }
.cr .c-old { color: var(--cloudy); font-size: var(--step-1); }
.cr .c-new { font-size: var(--step-1); font-weight: 500; position: relative; padding-left: 28px; }
.cr .c-new::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px; border-radius: 50%; background: var(--clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.cr.hd { padding-block: 16px; }
.cr.hd .c-old, .cr.hd .c-new { font-family: var(--display); font-size: var(--step-2); font-weight: 600; padding-left: 0; }
.cr.hd .c-old { color: var(--ink-2); }
.cr.hd .c-new { color: var(--crail); }
.cr.hd .c-new::before { display: none; }
@media (max-width: 700px) { .cr { grid-template-columns: 1fr 1fr; gap: 6px 16px; } .cr > span:first-child { grid-column: 1 / -1; } .cr.hd > span:first-child { display: none; } .cr .c-old, .cr .c-new { font-size: 0.9375rem; } }

.bs { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bs li { list-style: none; display: grid; gap: 8px; align-content: start; min-width: 0; }
.bs-vis { height: 190px; border-radius: 22px; background: var(--ivory); padding: 18px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; margin-bottom: 14px; position: relative; overflow: hidden; }
.bs .n { font-family: var(--display); font-size: var(--step-2); color: var(--crail); }
.bs h3 { font-size: var(--step-2); }
.bs li > p { color: var(--ink-2); font-size: 0.9375rem; }
.mini-me, .mini-ai { width: 100%; padding: 8px 12px; border-radius: 12px; font-size: 0.8125rem; line-height: 1.5; }
.mini-me { background: var(--ink); color: var(--ivory); border-bottom-right-radius: 3px; margin-left: 18%; width: 82%; }
.mini-ai { background: var(--pampas); width: 82%; border-bottom-left-radius: 3px; margin-right: 18%; }
.chip { padding: 5px 11px; border-radius: 8px; font-size: 0.8125rem; border: 1px solid var(--line); background: #ffffff; }
.chip.f::before { content: "▤ "; color: var(--blue); }
.chip.r { background: rgba(217, 119, 87, 0.12); border-color: rgba(217, 119, 87, 0.35); color: var(--crail); }
.mini-doc { width: 80%; padding: 14px; border-radius: 12px; background: #ffffff; border: 1px solid var(--line); display: grid; gap: 7px; box-shadow: 0 16px 30px -22px rgba(20, 20, 19, 0.5); }
.mini-doc b { font-size: 0.8125rem; }
.mini-doc i { height: 6px; border-radius: 3px; background: var(--line); }
.mini-doc i.s { width: 60%; }
.mini-doc .tag { justify-self: start; margin-top: 4px; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; background: #e7ecdf; color: #4f5f3a; }
.bs-vis.deploy img { width: 58%; filter: drop-shadow(0 14px 16px rgba(20, 20, 19, 0.2)); }
.bs-vis .dv { position: absolute; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); display: grid; place-items: center; }
.bs-vis .dv svg { width: 20px; height: 20px; fill: none; stroke: var(--ivory); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bs-vis .d1 { left: 10%; top: 14%; } .bs-vis .d2 { right: 10%; top: 14%; } .bs-vis .d3 { right: 14%; bottom: 12%; }
@media (max-width: 1000px) { .bs { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 520px) { .bs { grid-template-columns: 1fr; } }

.br { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); }
.br-card { border-radius: 32px; padding: clamp(28px, 4vw, 44px); background: var(--pampas); display: grid; gap: 10px; align-content: start; min-width: 0; }
.br-card.dark { background: var(--ink); color: var(--ivory); }
.br-img { height: clamp(180px, 20vw, 260px); position: relative; margin-bottom: 10px; background: radial-gradient(ellipse 50% 45% at 50% 60%, rgba(217, 119, 87, 0.2), transparent 70%); }
.br-img img { position: absolute; inset: 4% 12%; width: 76%; height: 92%; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.25)); }
.br-card .who { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; color: var(--crail); }
.br-card.dark .who { color: var(--clay); }
.br-card h3 { font-size: var(--step-3); }
.br-card > p:not(.who) { color: var(--ink-2); }
.br-card.dark > p:not(.who) { color: var(--cloudy); }
.devs { margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.devs li { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ivory); font-size: 0.875rem; }
.devs li svg { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: var(--ink); fill: none; stroke: var(--ivory); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.devs.ppl li { background: #262624; color: var(--ivory); }
.devs.ppl li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: #fff; }
@media (max-width: 860px) { .br { grid-template-columns: 1fr; } .bx-hero-grid { grid-template-columns: 1fr; } }

.bc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.bc-img { border-radius: 32px; overflow: hidden; }
.bc-img img { width: 100%; aspect-ratio: 650 / 585; object-fit: cover; }
.bc-text { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.bc-text h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.3; }
.bc-list { margin: 0; display: grid; width: 100%; }
.bc-list div { display: grid; grid-template-columns: 5.5em 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.bc-list dt { font-weight: 500; }
.bc-list dd { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 860px) { .bc { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .bc-list div { grid-template-columns: 1fr; gap: 2px; } }

html.bxm .bx-rv, html.bxm .bx-cmp .cr { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
html.bxm .bx-rv.in, html.bxm .bx-cmp .cr.in { opacity: 1; transform: none; }
html.bxm .bs li.bx-rv { transform: translateY(60px) scale(.96); }
html.bxm .bs li.bx-rv.in { transform: none; }

/* Builder page: photography (2026-10-18) */
.bx-hero { padding-bottom: clamp(56px, 7vw, 100px); }
.bx-stage { margin: clamp(40px, 6vw, 80px) 0 0; border-radius: 32px; overflow: hidden; background: var(--pampas); box-shadow: 0 60px 100px -70px rgba(20, 20, 19, 0.55); }
.bx-stage img { width: 100%; height: auto; aspect-ratio: 1774 / 887; display: block; }
.bx-process { margin: 0 0 clamp(32px, 4vw, 56px); border-radius: 28px; overflow: hidden; background: var(--ivory); }
.bx-process img { width: 100%; height: auto; aspect-ratio: 2161 / 728; display: block; }
.br-card { padding: 14px 14px clamp(24px, 3vw, 36px); }
.br-card > :not(.br-photo) { margin-inline: clamp(10px, 2vw, 22px); }
.br-photo { border-radius: 22px; overflow: hidden; margin-bottom: 14px; aspect-ratio: 3 / 2; background: var(--pampas); }
.br-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.br-card:hover .br-photo img { transform: scale(1.03); }
@media (max-width: 600px) { .bx-stage, .bx-process { border-radius: 18px; } }

/* Builder vs Coding Agent (2026-10-18) */
.bw-devs { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bw-devs li { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--pampas); font-size: 0.8125rem; }
.bw-devs svg { width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: var(--ink); fill: none; stroke: var(--ivory); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bw-devs .tm span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; color: #fff; background: var(--clay); }
.bw-devs .tm span + span { margin-left: -10px; background: var(--blue); border: 2px solid var(--pampas); }
.bx-win.playing .bw-devs { opacity: 0; transition: opacity .5s .3s; }
.bx-win.playing .bw-app.show ~ .bw-devs { opacity: 1; }

.lanes { display: grid; gap: 16px; margin-bottom: clamp(48px, 6vw, 80px); }
.lane { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; padding: 22px; border-radius: 28px; }
.lane.old { background: var(--ivory); border: 1px dashed var(--cloudy); }
.lane.new { background: var(--ink); color: var(--ivory); }
.lane-k { font-family: var(--display); font-size: var(--step-2); font-weight: 600; line-height: 1.3; }
.lane-k small { display: block; font-family: var(--body); font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }
.lane.new .lane-k { color: var(--clay); }
.lane.new .lane-k small { color: var(--cloudy); }
.flow { margin: 0; padding: 0; display: grid; grid-template-columns: 0.8fr 1fr 1.4fr 1.8fr; gap: 34px; align-items: stretch; }
.nd { list-style: none; position: relative; display: grid; gap: 4px; align-content: center; padding: 14px 16px; border-radius: 16px; min-width: 0; }
.lane.old .nd { background: var(--pampas); color: var(--ink-2); }
.lane.new .nd { background: #262624; }
.nd b { font-size: 1rem; font-weight: 500; }
.nd small { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.5; }
.lane.new .nd small { color: var(--cloudy); }
.nd + .nd::before { content: ""; position: absolute; left: -30px; top: 50%; width: 24px; height: 2px; background: var(--cloudy); }
.nd + .nd::after { content: ""; position: absolute; left: -12px; top: calc(50% - 4px); border-left: 7px solid var(--cloudy); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.lane.new .nd + .nd::before { background: repeating-linear-gradient(90deg, var(--clay) 0 5px, transparent 5px 9px); background-size: 18px 2px; animation: lanefl 0.8s linear infinite; }
.lane.new .nd + .nd::after { border-left-color: var(--clay); }
@keyframes lanefl { to { background-position: 18px 0; } }
.nd.warn { background: repeating-linear-gradient(-45deg, #f3e3dc 0 8px, #f7ece6 8px 16px) !important; border: 1px dashed #d9a39c; }
.nd.warn b { color: #9a4526; }
.nd.end { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.nd.end .one svg { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--cloudy); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nd.hl { background: linear-gradient(160deg, #3a2a22, #262624) !important; border: 1px solid rgba(217, 119, 87, 0.5); justify-items: start; }
.nd.hl img { width: 72px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.4)); margin-bottom: 2px; }
.nd.hl b { color: var(--ivory); }
.nd.fan { gap: 10px; }
.fan-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fan-g p { width: 100%; font-size: 0.75rem; color: var(--cloudy); letter-spacing: 0.04em; }
.fan-g span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #1b1b19; border: 1px solid var(--night-line); font-size: 0.8125rem; }
.fan-g svg { width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: var(--ivory); fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fan-g i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.6875rem; font-weight: 700; color: #fff; }
@media (max-width: 1000px) {
  .lane { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .nd:nth-child(3)::before, .nd:nth-child(3)::after { display: none; }
}
@media (max-width: 600px) {
  .flow { grid-template-columns: 1fr; gap: 30px; }
  .nd + .nd::before, .lane.new .nd + .nd::before { left: 50%; top: -26px; width: 2px; height: 20px; background: var(--cloudy); animation: none; }
  .lane.new .nd + .nd::before { background: var(--clay); }
  .nd + .nd::after, .nd:nth-child(3)::after { display: block; left: calc(50% - 5px); top: -10px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--cloudy); border-bottom: 0; }
  .nd:nth-child(3)::before { display: block; }
  .lane.new .nd + .nd::after { border-top-color: var(--clay); border-left-color: transparent; }
}
.cr { grid-template-columns: 0.7fr 1fr 1.2fr; }

.bx-hero h1 { font-size: clamp(2.125rem, 1.1rem + 2.9vw, 3.5rem); line-height: 1.2; }
@media (max-width: 700px) { .cr { grid-template-columns: 1fr 1fr; gap: 6px 16px; } .cr > span:first-child { grid-column: 1 / -1; } .cr.hd > span:first-child { display: none; } }

/* deploy-focused cards */
.bs-dp .n { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; }
.bs-vis .dp-st { position: absolute; right: 14px; top: 14px; font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; background: rgba(120, 140, 93, 0.18); color: #4f5f3a; }
.bs-vis .dp-st::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; }
.bs-vis.dvs, .bs-vis.ppl { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.dvc, .pc { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; background: #ffffff; border: 1px solid var(--line); font-size: 0.875rem; }
.dvc svg { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: var(--ink); fill: none; stroke: var(--ivory); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pc i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.75rem; font-weight: 700; color: #fff; flex: none; }
.dp-link { text-align: center; font-size: 0.75rem; color: var(--crail); margin-top: 2px; }
.bx-scn { padding-block: clamp(80px, 10vw, 150px); }
.scn { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.scn-card { padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: var(--pampas); display: grid; gap: 12px; align-content: start; }
.scn-card.dark { background: var(--ink); color: var(--ivory); }
.scn-card .who { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--crail); }
.scn-card.dark .who { color: var(--clay); }
.scn-card h3 { font-size: var(--step-3); }
.scn-card > p:not(.who) { color: var(--ink-2); }
.scn-card.dark > p:not(.who) { color: #cfcdc4; }
.scn-tags { margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.scn-tags li { list-style: none; padding: 4px 12px; border-radius: 999px; background: var(--ivory); font-size: 0.8125rem; }
.scn-card.dark .scn-tags li { background: #30302e; color: var(--ivory); }
.scn-note { margin-top: 18px; font-size: 0.8125rem; color: var(--cloudy); text-align: center; }
@media (max-width: 760px) { .scn { grid-template-columns: 1fr; } }