/* Websites demo: device switcher + build-a-page switches (Builder S). Prefix: wd- (controls and frame), ws- (the mock website). */
.wd__body { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: clamp(22px, 3.4vw, 52px); align-items: start; }
.wd__ctl { display: grid; gap: 30px; }
.wd__grp .mono-l { margin-bottom: 12px; }
.wd__grp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wd__grp-h .mono-l { margin-bottom: 12px; }
.wd__reset { padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--line-2); background: none; cursor: pointer; font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .3s, border-color .3s; }
.wd__reset:hover { color: #fff; border-color: var(--lime); }
.wd__devs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.wd__dev { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 4px 11px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: 400 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); transition: background .3s, color .3s; }
.wd__dev svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wd__dev:hover { color: #fff; }
.wd__dev.is-on { background: #fff; color: #050505; }
.wd__say { min-height: 3em; margin-top: 14px; font-size: 14px; line-height: 1.5; color: rgba(245, 245, 244, .7); }
.wd__sws { display: grid; gap: 4px; }
.wd__sw { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14.5px; color: rgba(245, 245, 244, .6); transition: border-color .3s, color .3s, background .3s; }
.wd__sw:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .02); }
.wd__sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wd__sw-t { position: relative; flex: none; width: 34px; height: 20px; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color .3s, background .3s; }
.wd__sw-t::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: transform .4s var(--ease), background .3s, box-shadow .3s; }
.wd__sw input:checked ~ .wd__sw-t { border-color: rgba(198, 244, 50, .55); background: rgba(198, 244, 50, .1); }
.wd__sw input:checked ~ .wd__sw-t::after { transform: translateX(14px); background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.wd__sw input:checked ~ span:last-child { color: #fff; }
.wd__sw input:focus-visible ~ .wd__sw-t { outline: 2px solid var(--lime); outline-offset: 3px; }
.wd__count { margin: 14px 0 0; }

/* the frame */
.wd__view { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wd__device { --dw: 100%; position: relative; width: var(--dw); max-width: 100%; margin-inline: auto; border: 1px solid var(--line-2); border-radius: 14px; background: #0e0e0e; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: width .85s var(--ease), border-radius .7s var(--ease), padding .7s var(--ease); }
.wd[data-device="tablet"] .wd__device { --dw: 68%; border-radius: 24px; padding: 9px; }
.wd[data-device="phone"] .wd__device { --dw: 316px; border-radius: 36px; padding: 11px; }
.wd__chrome { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.wd__addr { margin: 0 auto 0 10px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; font: 400 10.5px/1 var(--mono); letter-spacing: .03em; color: var(--muted); }
.wd[data-device="tablet"] .wd__chrome, .wd[data-device="phone"] .wd__chrome { display: none; }
.wd__notch { display: none; position: absolute; left: 50%; top: 17px; z-index: 3; width: 74px; height: 6px; margin-left: -37px; border-radius: 3px; background: rgba(5, 5, 5, .55); pointer-events: none; }
.wd[data-device="phone"] .wd__notch { display: block; }
.wd__screen { container: wd / inline-size; height: clamp(440px, 42vw, 560px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .25) transparent; background: #f1f1ee; color: #111; }
.wd[data-device="tablet"] .wd__screen { border-radius: 16px; }
.wd[data-device="phone"] .wd__screen { border-radius: 26px; }
.wd__hint { margin-top: 18px; text-align: center; }

/* build-a-page blocks: they collapse and fade */
.wd-blk { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .65s var(--ease), opacity .5s; }
.wd-blk__in { min-height: 0; overflow: hidden; }
.wd-blk.is-off { grid-template-rows: 0fr; opacity: 0; }
.wd-blk.is-new .wd-blk__in { animation: wd-new 1.3s ease-out; }
@keyframes wd-new { 0% { box-shadow: inset 0 0 0 3px #c6f432; } 100% { box-shadow: inset 0 0 0 3px rgba(198, 244, 50, 0); } }
html[data-motion="off"] .wd-blk, html[data-motion="off"] .wd__device { transition: none; }
html[data-motion="off"] .wd-blk.is-off { display: none; }

/* ---------- the mock website (a light, plain business site) ---------- */
.ws { --ink: #111; --mut: #6d6d68; --bd: #dcdcd6; font: 400 13px/1.45 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.ws__hdr { display: flex; align-items: center; gap: 18px; padding: 14px 26px; background: #fff; border-bottom: 1px solid var(--bd); }
.ws__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; letter-spacing: -.02em; }
.ws__logo i { width: 18px; height: 18px; border-radius: 5px; background: #111; }
.ws__nav { display: flex; gap: 22px; margin-left: auto; }
.ws__nav b { font-weight: 500; font-size: 12.5px; color: #444; }
.ws__cta { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 999px; background: #111; color: #fff; font-weight: 500; font-size: 12px; white-space: nowrap; }
.ws__cta--big { padding: 11px 20px; font-size: 13px; }
.ws__ghost { display: inline-flex; align-items: center; padding: 10px 18px; border: 1px solid #bdbdb6; border-radius: 999px; font-weight: 500; font-size: 13px; }
.ws__burger { display: none; flex-direction: column; gap: 4px; margin-left: auto; padding: 4px; }
.ws__burger i { width: 20px; height: 2px; border-radius: 1px; background: #111; }
.ws__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; padding: 30px 26px 28px; background: #f1f1ee; }
.ws__eye { display: inline-block; margin-bottom: 14px; font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ws__hero h4 { margin: 0; font: 600 34px/1.02 var(--sans); letter-spacing: -.045em; }
.ws__hero p { margin: 12px 0 0; max-width: 34ch; color: #555; font-size: 13.5px; }
.ws__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ws__hero-i i { display: block; aspect-ratio: 16 / 10; border-radius: 16px; background: radial-gradient(circle at 72% 30%, #c6f432 0 6.5%, transparent 7%), linear-gradient(160deg, #cbcdc3 0%, #e6e7df 55%, #d4d6cc 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.ws__svc, .ws__rev { padding: 30px 26px; background: #fff; border-top: 1px solid var(--bd); }
.ws__rev { background: #f1f1ee; }
.ws h5 { margin: 0 0 16px; font: 600 17px/1.1 var(--sans); letter-spacing: -.03em; }
.ws__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ws__card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--bd); border-radius: 14px; background: #fafaf8; }
.ws__card b { margin-top: 8px; font-weight: 600; font-size: 13.5px; letter-spacing: -.02em; }
.ws__card i, .ws__quotes i { display: block; height: 6px; width: 92%; border-radius: 3px; background: #dfdfd9; }
.ws__card i:last-child, .ws__quotes i.s { width: 64%; }
.ws__ic { width: 30px; height: 30px; border-radius: 9px; background: #111; }
.ws__ic--b { background: #c6f432; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ws__ic--c { background: #bdbdb6; }
.ws__quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ws__quotes figure { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--bd); }
.ws__stars { font-size: 13px; letter-spacing: 2px; color: #111; }
.ws__quotes figcaption { margin-top: 4px; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ws__quote { padding: 30px 26px; background: #111; color: #fff; }
.ws__quote h5 { color: #fff; }
.ws__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ws__in { display: block; padding: 11px 14px; border: 1px solid #343430; border-radius: 10px; color: #8d8d87; font-size: 12.5px; }
.ws__in--wide { grid-column: 1 / -1; padding-bottom: 28px; }
.ws__form .ws__cta { justify-self: start; background: #c6f432; color: #111; }
.ws__ftr { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 22px 26px 26px; background: #e7e7e2; }
.ws__fl { display: flex; gap: 8px; margin-left: auto; }
.ws__fl i { width: 40px; height: 6px; border-radius: 3px; background: #b9b9b2; }
.ws__ftr small { flex-basis: 100%; font: 400 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }

/* the mock re-flows with the frame (container queries on .wd__screen): tablet-ish under 800px, phone-ish under 560px */
@container wd (max-width: 800px) {
  .ws__hdr .ws__cta { display: none; }
  .ws__nav { gap: 18px; }
  .ws__hero { gap: 22px; padding: 28px 22px 26px; }
  .ws__hero h4 { font-size: 29px; }
  .ws__hdr, .ws__svc, .ws__rev, .ws__quote, .ws__ftr { padding-left: 22px; padding-right: 22px; }
  .ws__cards { gap: 10px; }
}
@container wd (max-width: 560px) {
  .ws__nav { display: none; }
  .ws__burger { display: flex; }
  .ws__hero { grid-template-columns: 1fr; gap: 22px; }
  .ws__hero h4 { font-size: 30px; }
  .ws__hero-i i { aspect-ratio: 16 / 9; }
  .ws__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws__card:last-child { grid-column: 1 / -1; }
}
@container wd (max-width: 450px) {
  .ws__hero h4 { font-size: 27px; }
  .ws__cards, .ws__quotes, .ws__form { grid-template-columns: 1fr; }
  .ws__card:last-child { grid-column: auto; }
  .ws__fl { margin-left: 0; }
}

@media (max-width: 899px) {
  .wd__body { grid-template-columns: 1fr; }
  .wd__view { order: -1; }
  .wd__ctl { grid-template-columns: 1fr 1fr; gap: 22px; }
  .wd__say { min-height: 0; }
  .wd[data-device="tablet"] .wd__device { --dw: 78%; }
}
@media (max-width: 560px) {
  .wd__ctl { grid-template-columns: 1fr; }
  .wd[data-device="tablet"] .wd__device { --dw: 84%; }
  .wd[data-device="phone"] .wd__device { --dw: min(300px, 92%); }
  .wd__screen { height: 480px; }
}