/* Website design page */
.wd-text { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 900px) { .wd-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.wd-text .checks { margin: 0; }
.wd-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .wd-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4rem); } }
.wd-split .features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; }

/* Browser build */
.bw { padding: clamp(1rem, 2.5vw, 1.5rem); background: rgba(30,30,30,.82); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
.bw-stage { height: 360px; display: flex; justify-content: center; }
.bw-frame { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #3a3a40; border-radius: 10px; background: #111113; transition: width .9s cubic-bezier(.6,0,.2,1), border-radius .9s; }
.bw[data-stage="mobile"] .bw-frame { width: min(250px, 70%); border-radius: 22px; }
.bw-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; background: #1b1b1f; border-bottom: 1px solid #2c2c31; flex: none; }
.bw-dots { display: flex; gap: 5px; flex: none; }
.bw-dots i { width: 8px; height: 8px; border-radius: 50%; background: #3a3a40; }
.bw[data-stage="mobile"] .bw-dots { display: none; }
.bw-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 6px; background: #0f0f11; color: var(--ink-2); font-size: .78rem; white-space: nowrap; overflow: hidden; }
.bw-lock { width: 12px; height: 12px; flex: none; fill: none; stroke: #6e6e76; stroke-width: 2.2; transition: stroke .4s; }
.bw[data-stage="live"] .bw-lock { stroke: #4fd18b; }
#bw-url::after { content: ""; display: inline-block; width: 1px; height: .9em; margin-left: 1px; vertical-align: -1px; background: var(--ink-2); animation: wd-caret 1s steps(2) infinite; }
.bw:not([data-stage="wire"]) #bw-url::after { display: none; }

.bw-page { flex: 1; min-height: 0; overflow: hidden; container-type: inline-size; background: var(--s-bg, #fff); transition: background .6s; }
.bw-in { padding: 14px 16px; color: var(--s-ink); font-family: var(--s-body, var(--font-body)); }
.bw-t { border-radius: 3px; transition: color .5s, background .5s, border-color .5s; }
.bw-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.bw-logo { font: 700 13px/1.2 var(--s-head); color: var(--s-ink); }
.bw-links { display: flex; gap: 10px; font-size: 10px; }
.bw-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: center; margin-bottom: 16px; }
.bw-h { margin: 0 0 6px; font: 700 20px/1.15 var(--s-head); color: var(--s-ink); }
.bw-p { margin: 0 0 10px; font-size: 11px; line-height: 1.4; opacity: .85; }
.bw-btn { display: inline-block; padding: 6px 11px; border-radius: var(--s-radius, 6px); background: var(--s-accent); color: var(--s-on, #fff); font-size: 10px; font-weight: 600; }
.bw-img { border-radius: var(--s-radius, 6px); background: var(--s-img); transition: background .6s; aspect-ratio: 4 / 3; }
.bw-img--hero { aspect-ratio: 5 / 4; }
.bw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bw-card { display: grid; gap: 6px; font-size: 10px; font-weight: 600; }
.bw-card .bw-img { aspect-ratio: 16 / 9; }
@container (max-width: 300px) {
  .bw-links { display: none; }
  .bw-hero { grid-template-columns: 1fr; }
  .bw-img--hero { order: -1; aspect-ratio: 16 / 9; }
  .bw-h { font-size: 18px; }
  .bw-cards { grid-template-columns: 1fr 1fr; }
}

/* Wireframe: gray boxes, no styling */
.bw[data-stage="wire"] .bw-page { background: #1c1c20; }
.bw[data-stage="wire"] .bw-t { color: transparent !important; background: #34343a; border-color: transparent; }
.bw[data-stage="wire"] .bw-btn { background: #34343a; }
.bw[data-stage="wire"] .bw-img { background: repeating-linear-gradient(135deg, #26262b 0 6px, #2c2c31 6px 12px); }

/* Themes */
.bw[data-theme="bakery"] { --s-bg: #fff8ef; --s-ink: #3b2a1e; --s-accent: #d9673a; --s-head: Georgia, "Times New Roman", serif; --s-radius: 14px; --s-img: linear-gradient(135deg, #f3c58f, #d9673a 70%, #8a3f24); }
.bw[data-theme="law"] { --s-bg: #0f1b2d; --s-ink: #eef2f7; --s-accent: #c9a45c; --s-on: #0f1b2d; --s-head: Georgia, "Times New Roman", serif; --s-radius: 2px; --s-img: linear-gradient(160deg, #22344f, #3d5578 55%, #c9a45c); }
.bw[data-theme="yard"] { --s-bg: #f1f7ee; --s-ink: #1f3324; --s-accent: #3f8f4f; --s-head: var(--font-body); --s-radius: 999px; --s-img: linear-gradient(140deg, #bfe3a7, #5fae5f 55%, #2f6b3b); }
.bw[data-theme="yard"] .bw-img { border-radius: 10px; }

.bw-toast { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: .4rem; margin: 0; padding: .45rem .75rem; border-radius: 8px; background: #10262b; border: 1px solid rgba(69,232,255,.5); color: #fff; font-size: .8rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.bw-toast svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bw[data-stage="live"] .bw-toast { opacity: 1; transform: none; transition-delay: .35s; }
.bw.no-anim *, .bw.no-anim { transition: none !important; }

.bw-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.bw-steps li { position: relative; padding-top: .7rem; font-size: .85rem; color: #7d7d84; transition: color .3s; }
.bw-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: #2e2e33; transition: background .3s; }
.bw-steps li.is-done { color: var(--ink-2); }
.bw-steps li.is-done::before { background: rgba(69,232,255,.45); }
.bw-steps li.is-now { color: var(--ink); }
.bw-steps li.is-now::before { background: var(--accent); }

/* Maintenance log */
.mlog { margin: 0; padding: clamp(1rem, 2.5vw, 1.4rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 1000px) { .mlog { position: sticky; top: calc(64px + 1.5rem); } }
.mlog__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.mlog__title { font-weight: 500; font-size: 1.05rem; }
.mlog__site { font-size: .8rem; color: var(--ink-2); }
.mlog__list { list-style: none; margin: 0; padding: 0; min-height: 19rem; }
.mlog__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .6rem 0; border-top: 1px solid #2a2a2f; font-size: .9rem; }
.mlog__list li:first-child { border-top: 0; animation: wd-in .5s cubic-bezier(.2,.7,.2,1); }
.mlog__list li.is-new .mlog__icon { box-shadow: 0 0 0 4px rgba(69,232,255,.15); }
.mlog__icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #10262b; transition: box-shadow .6s; }
.mlog__icon svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mlog__icon--violet { background: #241a2b; }
.mlog__icon--violet svg { stroke: var(--violet); }
.mlog__icon--green { background: #12271b; }
.mlog__icon--green svg { stroke: #4fd18b; }
.mlog__time { font-size: .78rem; color: #7d7d84; white-space: nowrap; font-variant-numeric: tabular-nums; }

@keyframes wd-caret { 50% { opacity: 0; } }
@keyframes wd-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #bw-url::after, .mlog__list li:first-child { animation: none; }
  .bw *, .bw-steps li { transition: none !important; }
}