/* Groweber — "Make My Website": project brief (3 parts, one question at a time) */
.gw-bf { --lime: #C6FD50; --ink: #131311; --soft: #F2F2F2; --muted: #6f6f6b; --line: #DADAD6;
  grid-column: 1 / -1; width: 100%; max-width: 920px; margin: 0 auto; box-sizing: border-box;
  font-family: "GW Satoshi", "Satoshi", system-ui, sans-serif; color: var(--fg-131311, #131311); }
.gw-bf *, .gw-bf *::before, .gw-bf *::after { box-sizing: border-box; }
.gw-bf [hidden] { display: none !important; }

/* while the brief is open: only the brief; once done: the page as before + a small "done" bar */
html.gw-bf-on .framer-8Z8bH .framer-7z0g7c > :not(.gw-bf) { display: none !important; }
html.gw-bf-on .framer-8Z8bH .framer-7z0g7c { display: block !important; }
.gw-bf-donebar { display: none; }
html:not(.gw-bf-on):not(.gw-bf-finished) .gw-bf { display: none; }

.gw-bf-run { display: flex; flex-direction: column; min-height: calc(100svh - 216px); }

/* head: 3 parts + progress line */
.gw-bf-eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-6f6f6b, #6f6f6b); }
.gw-bf-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gw-bf-axes button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1.5px solid var(--bd-dadad6, #dadad6); border-radius: 10px; background: var(--bg-ffffff, #ffffff); color: var(--fg-6f6f6b, #6f6f6b); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.gw-bf-axes button:disabled { cursor: default; opacity: .75; }
.gw-bf-axes em { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--bg-f2f2f2, #f2f2f2); font-style: normal; font-size: 13px; font-weight: 900; }
.gw-bf-axes em svg { display: none; width: 16px; height: 16px; }
.gw-bf-axes b { font-size: 14px; font-weight: 700; line-height: 1.2; }
.gw-bf-axes .is-now button { border-color: var(--bd-131311, #131311); background: var(--bg-131311, #131311); color: var(--fg-ffffff, #ffffff); box-shadow: 3px 3px 0 var(--sh-c6fd50, #c6fd50); }
.gw-bf-axes .is-now em { background: var(--bg-c6fd50, #c6fd50); color: var(--fg-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311}
.gw-bf-axes .is-done button { border-color: var(--bd-131311, #131311); color: var(--fg-131311, #131311); }
.gw-bf-axes .is-done button:hover { background: var(--bg-fafaf7, #fafaf7); }
.gw-bf-axes .is-done em { background: var(--bg-c6fd50, #c6fd50); border: 1.5px solid var(--bd-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-axes .is-done em svg { display: block; }
.gw-bf-axes .is-done em span { display: none; }

.gw-bf-track { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.gw-bf-bars { flex: 1; display: flex; gap: 6px; }
.gw-bf-bars span { flex: 1; height: 6px; border-radius: 6px; background: var(--bg-e6e6e3, #e6e6e3); overflow: hidden; position: relative; }
.gw-bf-bars span::after { content: ""; position: absolute; inset: 0; background: var(--bg-131311, #131311); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.gw-bf-bars .is-done::after { transform: scaleX(1); }
.gw-bf-bars .is-now::after { transform: scaleX(.5); background: var(--bg-c6fd50, #c6fd50); box-shadow: inset 0 0 0 1px var(--sh-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-count { flex: none; font-size: 13px; font-weight: 700; color: var(--fg-6f6f6b, #6f6f6b); }

/* one question, big, alone */
.gw-bf-stage { flex: 1; display: flex; align-items: center; padding: 48px 0 40px; }
.gw-bf-q { width: 100%; animation: gw-bf-up .4s ease both; }
.gw-bf-q.is-back { animation-name: gw-bf-down; }
@keyframes gw-bf-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes gw-bf-down { from { opacity: 0; transform: translateY(-18px); } }
.gw-bf-q.is-shake .gw-bf-field { animation: gw-bf-shake .35s ease; }
@media (prefers-reduced-motion: reduce) { .gw-bf-q, .gw-bf-sub { animation: none; } }
@keyframes gw-bf-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.gw-bf-num { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--fg-6f6f6b, #6f6f6b); }
.gw-bf-num span { padding: 3px 8px; border-radius: 5px; background: var(--bg-c6fd50, #c6fd50); border: 1.5px solid var(--bd-131311, #131311); color: var(--fg-131311, #131311); font-size: 13px; font-weight: 900;--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311}
.gw-bf-title { margin: 0; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; font-weight: 900; letter-spacing: -.03em; color: var(--fg-131311, #131311); }
.gw-bf-title sup { margin-left: 4px; font-size: .5em; color: var(--fg-c2410c, #c2410c); vertical-align: super; }
.gw-bf-hint { margin: 14px 0 0; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--fg-6f6f6b, #6f6f6b); }
.gw-bf-field { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.gw-bf-err { margin: 16px 0 0; display: inline-flex; padding: 9px 12px; border-radius: 8px; background: var(--bg-fdecea, #fdecea); color: var(--fg-b42318, #b42318); font-size: 14px; font-weight: 700; }

/* inputs */
.gw-bf-in { width: 100%; padding: 14px 16px; border: 1.5px solid var(--bd-dadad6, #dadad6); border-radius: 10px; background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); font: inherit; font-size: 17px; font-weight: 500; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.gw-bf-in::placeholder { color: var(--fg-a3a39e, #a3a39e); }
.gw-bf-in:focus { border-color: var(--bd-131311, #131311); box-shadow: 3px 3px 0 var(--sh-131311, #131311); }
.gw-bf-big { padding: 8px 0 12px; border: 0; border-bottom: 2px solid var(--bd-dadad6, #dadad6); border-radius: 0; background: transparent; font-size: clamp(24px, 3vw, 34px); font-weight: 700; }
.gw-bf-big:focus { border-color: var(--bd-131311, #131311); box-shadow: none; }
.gw-bf-area { min-height: 170px; resize: vertical; line-height: 1.5; }
.gw-bf-other { max-width: 420px; }
.gw-bf-note { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--fg-131311, #131311); }
.gw-bf-sub { margin-top: 8px; animation: gw-bf-in .3s ease; }
@keyframes gw-bf-in { from { opacity: 0; transform: translateY(6px); } }

.gw-bf-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gw-bf-link { display: flex; flex-direction: column; gap: 6px; }
.gw-bf-link span { font-size: 13px; font-weight: 700; color: var(--fg-6f6f6b, #6f6f6b); }

/* choices */
.gw-bf-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.gw-bf-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 16px 10px 12px; border: 1.5px solid var(--bd-dadad6, #dadad6); border-radius: 10px; background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.gw-bf-opt:hover { border-color: var(--bd-131311, #131311); }
.gw-bf-opt i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--bd-c9c9c4, #c9c9c4); border-radius: 6px; background: var(--bg-ffffff, #ffffff); }
.gw-bf-opt[role="radio"] i { border-radius: 50%; }
.gw-bf-opt i svg { width: 14px; height: 14px; opacity: 0; }
.gw-bf-opt span { display: flex; flex-direction: column; gap: 2px; }
.gw-bf-opt b { font-size: 16px; font-weight: 700; }
.gw-bf-opt small { font-size: 13.5px; font-weight: 500; color: var(--fg-6f6f6b, #6f6f6b); }
.gw-bf-opt.is-on { border-color: var(--bd-131311, #131311); background: var(--bg-c6fd50, #c6fd50); box-shadow: 3px 3px 0 var(--sh-131311, #131311);--fg-131311:#131311;--fg-3b3b37:#3b3b37;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-opt.is-on i { border-color: var(--bd-131311, #131311); background: var(--bg-131311, #131311); color: var(--fg-c6fd50, #c6fd50); }
.gw-bf-opt.is-on i svg { opacity: 1; }
.gw-bf-opt.is-on small { color: var(--fg-3b3b37, #3b3b37); }
.gw-bf-opts.is-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gw-bf-opts.is-cards .gw-bf-opt { align-items: flex-start; padding: 16px; min-height: 92px; }
.gw-bf-yn .gw-bf-opt { min-width: 140px; }


/* colors */
.gw-bf-colors { display: flex; flex-wrap: wrap; gap: 12px; }
.gw-bf-sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; padding: 0; border: 0; background: none; color: var(--fg-6f6f6b, #6f6f6b); font: inherit; cursor: pointer; }
.gw-bf-sw span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; border: 1.5px solid var(--bd-131311-a18, rgba(19, 19, 17, 0.18)); transition: transform .15s ease, box-shadow .15s ease; }
.gw-bf-sw small { font-size: 12px; font-weight: 700; }
.gw-bf-sw:hover span { transform: translateY(-2px); }
.gw-bf-sw.is-on span { border-color: var(--bd-131311, #131311); box-shadow: 0 0 0 3px var(--sh-ffffff, #ffffff), 0 0 0 5px var(--sh-131311, #131311); }
.gw-bf-sw.is-on small { color: var(--fg-131311, #131311); }
.gw-bf-add span { border: 1.5px dashed var(--bd-a3a39e, #a3a39e); background: var(--bg-ffffff, #ffffff); font-size: 24px; font-weight: 500; color: var(--fg-6f6f6b, #6f6f6b); }
.gw-bf-add input { position: absolute; inset: 0 0 auto; width: 52px; height: 52px; margin: 0 auto; opacity: 0; cursor: pointer; }
.gw-bf-check { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; color: var(--fg-131311, #131311); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.gw-bf-check i { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--bd-c9c9c4, #c9c9c4); border-radius: 6px; }
.gw-bf-check svg { width: 14px; height: 14px; opacity: 0; }
.gw-bf-check.is-on i { border-color: var(--bd-131311, #131311); background: var(--bg-131311, #131311); color: var(--fg-c6fd50, #c6fd50); }
.gw-bf-check.is-on svg { opacity: 1; }
.gw-bf-links.is-off { opacity: .4; pointer-events: none; }   /* "I don't have social media" ticked */
.gw-bf-links + .gw-bf-check { margin-top: 14px; }

/* logo upload */
.gw-bf-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 20px; border: 1.5px dashed var(--bd-a3a39e, #a3a39e); border-radius: 12px; background: var(--bg-fafaf7, #fafaf7); text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.gw-bf-drop:hover, .gw-bf-drop.has-files { border-color: var(--bd-131311, #131311); background: var(--bg-ffffff, #ffffff); }
.gw-bf-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gw-bf-drop b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.gw-bf-drop small { font-size: 13.5px; font-weight: 500; color: var(--fg-6f6f6b, #6f6f6b); }

/* bottom: back / next */
.gw-bf-nav { display: flex; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--bd-e6e6e3, #e6e6e3); }
.gw-bf-back { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px 0 12px; border: 1.5px solid var(--bd-dadad6, #dadad6); border-radius: 10px; background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: border-color .15s ease; }
.gw-bf-back svg { width: 20px; height: 20px; transform: rotate(180deg); }
.gw-bf-back:hover { border-color: var(--bd-131311, #131311); }
.gw-bf-back:disabled { opacity: .4; cursor: default; border-color: var(--bd-dadad6, #dadad6); }
.gw-bf-tip { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--fg-6f6f6b, #6f6f6b); }
.gw-bf-tip kbd { padding: 2px 6px; border: 1px solid var(--bd-dadad6, #dadad6); border-radius: 5px; background: var(--bg-ffffff, #ffffff); font: inherit; font-weight: 700; color: var(--fg-131311, #131311); }
.gw-bf-next { display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 0 6px 0 18px; border: 1.5px solid var(--bd-131311, #131311); border-radius: 10px; background: var(--bg-c6fd50, #c6fd50); color: var(--fg-131311, #131311); box-shadow: 4px 3px 0 var(--sh-131311, #131311); font: inherit; font-size: 13px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311}
.gw-bf-next i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; background: var(--bg-131311, #131311); color: var(--fg-ffffff, #ffffff); transition: transform .2s ease; }
.gw-bf-next i svg { width: 20px; height: 20px; }
.gw-bf-next:hover { transform: translate(2px, 2px); box-shadow: 2px 1px 0 var(--sh-131311, #131311); }
.gw-bf-next:hover i { transform: rotate(-45deg); }

/* brief done: small bar above the page title */
.gw-bf-donebar { align-items: center; gap: 14px; margin: 0 auto 36px; padding: 12px 12px 12px 14px; border: 1.5px solid var(--bd-131311, #131311); border-radius: 12px; background: var(--bg-ffffff, #ffffff); box-shadow: 3px 3px 0 var(--sh-131311, #131311); }
.gw-bf-donecheck { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--bg-c6fd50, #c6fd50); border: 1.5px solid var(--bd-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-donecheck svg { width: 22px; height: 22px; }
.gw-bf-donebar p { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.gw-bf-donebar p span { font-size: 14px; font-weight: 500; color: var(--fg-6f6f6b, #6f6f6b); }
.gw-bf-edit { flex: none; height: 40px; padding: 0 14px; border: 1.5px solid var(--bd-dadad6, #dadad6); border-radius: 8px; background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.gw-bf-edit:hover { border-color: var(--bd-131311, #131311); }

@media (max-width: 809.98px) {
  .gw-bf-run { min-height: calc(100svh - 150px); }
  .gw-bf-axes { gap: 6px; }
  .gw-bf-axes button { justify-content: center; padding: 8px; }
  .gw-bf-axes b { display: none; }
  .gw-bf-axes .is-now button { justify-content: flex-start; }
  .gw-bf-axes .is-now b { display: block; font-size: 13px; }
  .gw-bf-axes { display: flex; }
  .gw-bf-axes li { flex: none; }
  .gw-bf-axes li.is-now { flex: 1; min-width: 0; }
  .gw-bf-axes li:not(.is-now) button { width: 46px; }
  .gw-bf-stage { padding: 32px 0 28px; align-items: flex-start; }
  .gw-bf-hint { font-size: 15.5px; }
  .gw-bf-field { margin-top: 22px; }
  .gw-bf-links { grid-template-columns: 1fr; }
  .gw-bf-opt { flex: 1 1 calc(50% - 5px); }
  .gw-bf-tip { display: none; }
  .gw-bf-next { margin-left: auto; }
  .gw-bf-nav { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px; background: var(--bg-ffffff-a96, rgba(255, 255, 255, 0.96)); }
  .gw-bf-donebar { flex-wrap: wrap; }
  .gw-bf-donebar p { flex-basis: calc(100% - 60px); }
  .gw-bf-edit { width: 100%; }
}

/* brief done: the done bar sits under the page subtitle */
html.gw-bf-finished .gw-bf { display: none; }
html.gw-bf-finished .gw-bf-donebar { display: flex; }
.gw-bf-donebar { --lime: #C6FD50; --ink: #131311; --muted: #6f6f6b; --line: #DADAD6; box-sizing: border-box; width: 100%; max-width: 720px; margin: 28px auto 0;
  font-family: "GW Satoshi", "Satoshi", system-ui, sans-serif; color: var(--fg-131311, #131311); text-align: left; }
.gw-bf-donebar * { box-sizing: border-box; }

.gw-bf-sub .gw-bf-other { margin-top: 14px; max-width: none; }

/* example websites: same cards as the Work page, selectable */
.gw-bf .gw-sites.gw-bf-sites { gap: 28px 20px; margin-top: 4px; }
.gw-bf-site { cursor: pointer; outline: none; border-radius: 14px; }
.gw-bf-site .gw-site-img { position: relative; }
.gw-bf-site .gw-site-cat { margin-top: 16px; }
.gw-bf-site .gw-site-name { font-size: 20px; }
.gw-bf-site .gw-site-url { align-self: flex-start; text-decoration: none; }
.gw-bf-site .gw-site-url:hover { color: var(--fg-131311, #131311); text-decoration: underline; text-underline-offset: 3px; }
.gw-bf-site-tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--bd-131311, #131311); background: var(--bg-ffffff-a92, rgba(255, 255, 255, 0.92)); color: transparent; }
.gw-bf-site-tick svg { width: 18px; height: 18px; }
.gw-bf-site.is-on .gw-site-img { box-shadow: 0 0 0 2px var(--sh-131311, #131311), 4px 4px 0 2px var(--sh-131311, #131311); }
.gw-bf-site.is-on .gw-bf-site-tick { background: var(--bg-c6fd50, #c6fd50); color: var(--fg-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311}
.gw-bf-site:focus-visible .gw-site-img { box-shadow: 0 0 0 3px var(--sh-c6fd50, #c6fd50), 0 0 0 4.5px var(--sh-131311, #131311); }
.gw-bf-other-btn { margin-top: 22px; }
.gw-bf-sub .gw-bf-other { margin-top: 14px; max-width: 520px; }

/* the "brief ready" box sits in the reservation card, in place of the old "Website name" field */
.gw-rsv .gw-bf-donebar { max-width: none; margin: 0; gap: 12px; padding: 10px 10px 10px 12px; border: 1.5px solid var(--bd-dadad6, #dadad6); border-radius: 12px; box-shadow: none; background: var(--bg-ffffff, #ffffff); }
.gw-rsv .gw-bf-donecheck { width: 34px; height: 34px; border-radius: 8px; }
.gw-rsv .gw-bf-donecheck svg { width: 19px; height: 19px; }
.gw-rsv .gw-bf-donebar p { font-size: 14.5px; }
.gw-rsv .gw-bf-donebar p span { font-size: 13px; }
.gw-rsv .gw-bf-edit { height: 36px; padding: 0 12px; font-size: 12.5px; }
.gw-rsv .gw-bf-edit:hover { border-color: var(--bd-131311, #131311); }
@media (max-width: 809.98px) { .gw-rsv .gw-bf-edit { width: auto; } .gw-rsv .gw-bf-donebar { flex-wrap: nowrap; } .gw-rsv .gw-bf-donebar p { flex-basis: auto; } }

/* "(optional)" after the questions without a star */
.gw-bf-opt-tag { font-size: .42em; font-weight: 700; letter-spacing: 0; color: var(--fg-a3a39e, #a3a39e); vertical-align: middle; white-space: nowrap; }

/* social links: brand logo next to the label */
.gw-bf-social > span { display: flex; align-items: center; gap: 8px; color: var(--fg-131311, #131311); }
.gw-bf-sicon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--fg-ffffff, #ffffff); }
.gw-bf-sicon svg { width: 14px; height: 14px; }
.gw-bf-s-instagram { background: radial-gradient(circle at 30% 107%, var(--bg-fdf497, #fdf497) 0%, var(--bg-fd5949, #fd5949) 45%, var(--bg-d6249f, #d6249f) 60%, var(--bg-285aeb, #285aeb) 90%);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-s-facebook { background: var(--bg-1877f2, #1877f2);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-s-tiktok { background: var(--bg-131311, #131311); }
.gw-bf-s-other { background: var(--bg-f2f2f2, #f2f2f2); color: var(--fg-131311, #131311); }
.gw-bf-s-instagram, .gw-bf-s-facebook { color: var(--gw-on-ink, #fafafa); }   /* white glyph on the brand colors, both themes */

/* logo: one box per photo (up to 3) */
.gw-bf-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.gw-bf-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; border: 1.5px dashed var(--bd-a3a39e, #a3a39e); border-radius: 12px; background: var(--bg-fafaf7, #fafaf7); color: var(--fg-6f6f6b, #6f6f6b); cursor: pointer; overflow: hidden; transition: border-color .15s ease, background-color .15s ease; }
.gw-bf-slot:hover, .gw-bf-slot:focus-within { border-color: var(--bd-131311, #131311); background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); }
.gw-bf-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gw-bf-slot em { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-ffffff, #ffffff); border: 1.5px solid currentColor; font-style: normal; font-size: 22px; font-weight: 500; line-height: 1; }
.gw-bf-slot b { font-size: 13.5px; font-weight: 700; }
.gw-bf-slot.has-file { border: 1.5px solid var(--bd-131311, #131311); background: var(--bg-ffffff, #ffffff); cursor: default; box-shadow: 3px 3px 0 var(--sh-131311, #131311); }
.gw-bf-slot.has-file img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px 10px 34px; }
.gw-bf-slot.has-file span { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 10px; background: var(--bg-ffffff, #ffffff); border-top: 1px solid var(--bd-e6e6e3, #e6e6e3); color: var(--fg-131311, #131311); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-bf-slot.has-file button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--bd-131311, #131311); border-radius: 7px; background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.gw-bf-slot.has-file button:hover { background: var(--bg-fdecea, #fdecea); color: var(--fg-b42318, #b42318); border-color: var(--bd-b42318, #b42318); }
.gw-bf-slots-tip { margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--fg-6f6f6b, #6f6f6b); }

/* part 3, question 1: fictional store, the "Shop" menu lists the product types */
.gw-bf-ptypes { max-width: 560px; }
.gw-bf-mk { margin: 10px 0 0; container-type: inline-size; }
.gw-bf-mk figcaption { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--fg-6f6f6b, #6f6f6b); text-align: center; }
.gw-bf-mk figcaption b { color: var(--fg-131311, #131311); }
.gw-bf-mk-win { --c: var(--fg-2b2622, #2b2622); position: relative; width: 100%; aspect-ratio: 92 / 52; font-size: calc(100cqw / 92); border-radius: 1.4em; overflow: hidden; background: var(--bg-f6f3ee, #f6f3ee); color: var(--c); box-shadow: 0 2.4em 5em var(--sh-131311-a16, rgba(19, 19, 17, 0.16)), 0 .3em .9em var(--sh-131311-a8, rgba(19, 19, 17, 0.08)), 0 0 0 .1em var(--sh-131311-a10, rgba(19, 19, 17, 0.1)); line-height: 1.2; user-select: none; }
.gw-bf-mk-win svg { display: block; }
.gw-bf-mk-tabs { display: flex; align-items: flex-end; gap: .6em; height: 4.2em; padding: 0 1.6em; background: var(--bg-e8e7e4, #e8e7e4); }
.gw-bf-mk-dots { display: flex; gap: .7em; align-self: center; margin-right: 1.2em; }
.gw-bf-mk-dots i { width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--bg-ff5f57, #ff5f57);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-mk-dots i:nth-child(2) { background: var(--bg-febc2e, #febc2e);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-mk-dots i:nth-child(3) { background: var(--bg-28c840, #28c840); }
.gw-bf-mk-tab { display: flex; align-items: center; gap: .8em; height: 3.2em; padding: 0 1.3em; border-radius: .9em .9em 0 0; font-size: 1.15em; color: var(--fg-6b6b6b, #6b6b6b); white-space: nowrap; }
.gw-bf-mk-tab i { width: 1.1em; height: 1.1em; border-radius: .3em; background: var(--bg-a9a9a9, #a9a9a9); }
.gw-bf-mk-tab.is-on { width: 21em; background: var(--bg-ffffff, #ffffff); color: var(--c); }
.gw-bf-mk-tab.is-on i { background: var(--bg-131311, #131311); box-shadow: inset 0 0 0 .22em var(--sh-c6fd50, #c6fd50); }
.gw-bf-mk-tab em { margin-left: auto; font-style: normal; color: var(--fg-999999, #999999); }
.gw-bf-mk-plus { align-self: center; margin-left: .4em; font-size: 1.5em; color: var(--fg-777777, #777777); }
.gw-bf-mk-bar { display: flex; align-items: center; gap: 1.4em; height: 3.8em; padding: 0 1.6em; background: var(--bg-ffffff, #ffffff); border-bottom: .1em solid var(--bd-eceae6, #eceae6); }
.gw-bf-mk-nav { font-size: 1.2em; color: var(--fg-888888, #888888); white-space: nowrap; }
.gw-bf-mk-url { flex: 1; display: flex; align-items: center; gap: .6em; height: 2.5em; padding: 0 1.1em; border-radius: 1.3em; background: var(--bg-f1f0ee, #f1f0ee); font-size: 1.15em; }
.gw-bf-mk-url svg { width: 1em; height: 1em; color: var(--fg-666666, #666666); }
.gw-bf-mk-url span { color: var(--fg-888888, #888888); }
.gw-bf-mk-av { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--bg-c6fd50, #c6fd50);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-mk-page { position: relative; height: calc(100% - 8em); overflow: hidden; }
.gw-bf-mk-promo { height: 2.4em; display: grid; place-items: center; background: var(--bg-131311, #131311); color: var(--fg-c6fd50, #c6fd50); font-size: 1em; font-weight: 700; letter-spacing: .04em; }
.gw-bf-mk-hdr { position: relative; z-index: 2; display: flex; align-items: center; height: 5.6em; padding: 0 3em; background: var(--bg-ffffff, #ffffff); border-bottom: .1em solid var(--bd-eceae6, #eceae6); }
.gw-bf-mk-logo { font-size: 1.9em; font-weight: 900; letter-spacing: .06em; }
.gw-bf-mk-logo span { color: var(--fg-9a9a95, #9a9a95); }
.gw-bf-mk-hdr nav { display: flex; gap: 2.6em; margin-left: 7em; font-size: 1.3em; font-weight: 700; color: var(--fg-55524d, #55524d); }
.gw-bf-mk-hdr nav span { position: relative; display: flex; align-items: center; gap: .3em; padding: .3em 0; }
.gw-bf-mk-hdr nav .is-on { color: var(--fg-131311, #131311); }
.gw-bf-mk-hdr nav .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15em; height: .2em; border-radius: .2em; background: var(--bg-131311, #131311); }
.gw-bf-mk-hdr nav svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.6; transform: rotate(180deg); }
.gw-bf-mk-icons { position: relative; display: flex; gap: 1.6em; margin-left: auto; }
.gw-bf-mk-icons svg { width: 2em; height: 2em; fill: none; stroke: var(--fg-131311, #131311); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.gw-bf-mk-icons em { position: absolute; top: -.5em; right: -.7em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--bg-c6fd50, #c6fd50); border: .1em solid var(--bd-131311, #131311); font-style: normal; font-size: .9em; font-weight: 900;--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-mk-hero { display: flex; align-items: center; justify-content: space-between; height: 17em; margin: 2em 3em 0; padding: 0 4em; border-radius: 1.2em; background: var(--bg-131311, #131311); color: var(--fg-ffffff, #ffffff); }
.gw-bf-mk-hero small { display: block; font-size: 1.1em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-c6fd50, #c6fd50); }
.gw-bf-mk-hero strong { display: block; margin: .3em 0 .6em; font-size: 3.4em; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.gw-bf-mk-cta { display: inline-block; padding: .7em 1.3em; border-radius: .6em; background: var(--bg-c6fd50, #c6fd50); color: var(--fg-131311, #131311); font-size: 1.1em; font-weight: 800;--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311}
.gw-bf-mk-art { display: grid; place-items: center; width: 14em; height: 14em; border-radius: 50%; background: var(--bg-c6fd50, #c6fd50);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-mk-art svg { width: 9em; height: 9em; fill: var(--fg-131311, #131311); stroke: var(--fg-131311, #131311); stroke-width: .6; stroke-linejoin: round; }
.gw-bf-mk-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em; margin: 2em 3em 0; }
.gw-bf-mk-cards div { display: flex; flex-direction: column; gap: .3em; }
.gw-bf-mk-cards span { display: grid; place-items: center; height: 9em; margin-bottom: .5em; border-radius: 1em; background: var(--bg-eae6df, #eae6df); }
.gw-bf-mk-cards svg { width: 5em; height: 5em; fill: var(--fg-ffffff, #ffffff); stroke: var(--fg-2b2622, #2b2622); stroke-width: 1.2; stroke-linejoin: round; }
.gw-bf-mk-cards b { font-size: 1.2em; font-weight: 800; }
.gw-bf-mk-cards small { font-size: 1.05em; color: var(--fg-77736c, #77736c); }
/* the open "Shop" menu */
.gw-bf-mk-dd { position: absolute; z-index: 3; top: 6em; left: 27.8em; display: flex; gap: 1.6em; width: 46em; padding: 1.6em; border-radius: 1.2em; background: var(--bg-ffffff, #ffffff); box-shadow: 0 1.6em 4em var(--sh-131311-a22, rgba(19, 19, 17, 0.22)), 0 0 0 .1em var(--sh-131311-a8, rgba(19, 19, 17, 0.08)); animation: gw-bf-mk-open .5s .15s ease both; }
@keyframes gw-bf-mk-open { from { opacity: 0; transform: translateY(-.8em); } }
.gw-bf-mk-dd::before { content: ""; position: absolute; top: -.7em; left: 6.6em; width: 1.4em; height: 1.4em; background: var(--bg-ffffff, #ffffff); transform: rotate(45deg); border-radius: .2em; }
.gw-bf-mk-dd-list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .4em .8em; align-content: start; }
.gw-bf-mk-dd-list p { grid-column: 1 / -1; margin: 0 0 .5em; font-size: 1em; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-9a9a95, #9a9a95); }
.gw-bf-mk-dd-list span { display: flex; align-items: center; gap: .9em; padding: .6em .7em; border-radius: .8em; }
.gw-bf-mk-dd-list span.is-hover { background: var(--bg-f3f1ec, #f3f1ec); }
.gw-bf-mk-dd-list i { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: .8em; background: var(--bg-f1eee8, #f1eee8); }
.gw-bf-mk-dd-list .is-hover i { background: var(--bg-c6fd50, #c6fd50); box-shadow: inset 0 0 0 .1em var(--sh-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-mk-dd-list svg { width: 2em; height: 2em; fill: none; stroke: var(--fg-131311, #131311); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.gw-bf-mk-dd-list b { font-size: 1.3em; font-weight: 800; }
.gw-bf-mk-dd-list small { margin-left: auto; font-size: 1em; font-weight: 700; color: var(--fg-9a9a95, #9a9a95); }
.gw-bf-mk-dd-feat { display: flex; flex-direction: column; justify-content: flex-end; width: 13em; padding: 1.2em; border-radius: 1em; background: var(--bg-131311, #131311); color: var(--fg-ffffff, #ffffff); }
.gw-bf-mk-dd-feat div { display: grid; place-items: center; flex: 1; }
.gw-bf-mk-dd-feat div svg { width: 7em; height: 7em; fill: var(--fg-c6fd50, #c6fd50); stroke: var(--fg-c6fd50, #c6fd50); stroke-width: .6; stroke-linejoin: round; }
.gw-bf-mk-dd-feat small { font-size: .95em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-c6fd50, #c6fd50); }
.gw-bf-mk-dd-feat b { font-size: 1.6em; font-weight: 900; }
.gw-bf-mk-cursor { position: absolute; z-index: 4; top: 2.1em; left: 34.6em; width: 2.6em; height: 2.6em; fill: var(--fg-131311, #131311); stroke: var(--fg-ffffff, #ffffff); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 .2em .3em var(--fg-000000-a30, rgba(0, 0, 0, 0.3))); }
@media (prefers-reduced-motion: reduce) { .gw-bf-mk-dd { animation: none; } }

/* store example: the page stays discreet, the "Shop" menu stands out */
.gw-bf-mk-tab.is-on i { background: var(--bg-c9c5bd, #c9c5bd); box-shadow: none; }
.gw-bf-mk-av { background: var(--bg-ddd9d1, #ddd9d1); }
.gw-bf-mk-promo { background: var(--bg-ece9e3, #ece9e3); color: var(--fg-9c978e, #9c978e); }
.gw-bf-mk-logo { color: var(--fg-7a766f, #7a766f); }
.gw-bf-mk-logo span { color: var(--fg-b9b4ab, #b9b4ab); }
.gw-bf-mk-hdr nav { color: var(--fg-9c978e, #9c978e); }
.gw-bf-mk-icons svg { stroke: var(--fg-9c978e, #9c978e); }
.gw-bf-mk-icons em { background: var(--bg-e6e2db, #e6e2db); border-color: var(--bd-e6e2db, #e6e2db); color: var(--fg-7a766f, #7a766f); }
.gw-bf-mk-hero { background: var(--bg-eae6df, #eae6df); color: var(--fg-8c877e, #8c877e); }
.gw-bf-mk-hero small { color: var(--fg-aaa59c, #aaa59c); }
.gw-bf-mk-cta { background: var(--bg-dcd7ce, #dcd7ce); color: var(--fg-8c877e, #8c877e); }
.gw-bf-mk-art { background: var(--bg-e0dbd2, #e0dbd2); }
.gw-bf-mk-art svg { fill: var(--fg-cdc7bc, #cdc7bc); stroke: var(--fg-cdc7bc, #cdc7bc); }
.gw-bf-mk-cards span { background: var(--bg-efece6, #efece6); }
.gw-bf-mk-cards svg { fill: var(--fg-f8f6f2, #f8f6f2); stroke: var(--fg-bdb8af, #bdb8af); }
.gw-bf-mk-cards b { color: var(--fg-9c978e, #9c978e); }
.gw-bf-mk-cards small { color: var(--fg-b9b4ab, #b9b4ab); }
.gw-bf-mk-page::after { content: ""; position: absolute; z-index: 1; inset: 5.6em 0 0; background: var(--bg-f6f3ee-a62, rgba(246, 243, 238, 0.62)); backdrop-filter: blur(.12em); }   /* the page behind fades: the Shop menu stands out */
.gw-bf-mk-dd { padding: 1.8em; border: .15em solid var(--bd-131311, #131311); box-shadow: .6em .6em 0 var(--sh-131311, #131311), 0 2em 4em var(--sh-131311-a18, rgba(19, 19, 17, 0.18)); }
.gw-bf-mk-dd::before { top: -.85em; border-top: .15em solid var(--bd-131311, #131311); border-left: .15em solid var(--bd-131311, #131311); border-radius: .2em 0 0 0; }
.gw-bf-mk-dd-list { gap: .6em 1em; }
.gw-bf-mk-dd-list p { color: var(--fg-131311, #131311); }
.gw-bf-mk-dd-list span { padding: .7em .8em; border: .1em solid var(--bd-eceae6, #eceae6); }
.gw-bf-mk-dd-list span.is-hover { background: var(--bg-f6fbe9, #f6fbe9); border-color: var(--bd-131311, #131311); }
.gw-bf-mk-dd-list i, .gw-bf-mk-dd-list .is-hover i { background: var(--bg-c6fd50, #c6fd50); box-shadow: inset 0 0 0 .12em var(--sh-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-mk-dd-list b { font-size: 1.45em; font-weight: 900; color: var(--fg-131311, #131311); }
.gw-bf-mk-dd-list small { padding: .2em .6em; border-radius: 1em; background: var(--bg-131311, #131311); color: var(--fg-ffffff, #ffffff); font-size: .95em; }
/* menu without the "New in" card: narrower */
.gw-bf-mk-dd { width: 40em; }
/* "Product type 1: T-shirts"… */
.gw-bf-mk-dd-list em { display: flex; flex-direction: column; gap: .15em; font-style: normal; }
.gw-bf-mk-dd-list u { font-size: .95em; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-8c877e, #8c877e); }

/* store example filled with the client's own product types */
.gw-bf-mk-host { font-weight: inherit; }
.gw-bf-mk-dd-list span, .gw-bf-mk-dd-list em { min-width: 0; }
.gw-bf-mk-dd-list em b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-bf-mk-cards b, .gw-bf-mk-logo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-bf-mk-logo { max-width: 16em; }
.gw-bf-mk.is-mine .gw-bf-mk-dd-list span { animation: gw-bf-mk-pop .35s ease both; }
@keyframes gw-bf-mk-pop { from { opacity: .4; transform: scale(.96); } }

/* store example: more than 6 types → bigger menu, 3 columns */
.gw-bf-mk.is-many .gw-bf-mk-dd { left: 24em; width: 60em; padding: 1.4em; }
.gw-bf-mk.is-many .gw-bf-mk-dd::before { left: 10.4em; }
.gw-bf-mk.is-many .gw-bf-mk-dd-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em .8em; }
.gw-bf-mk.is-many .gw-bf-mk-dd-list span { padding: .5em .7em; }

/* one box per product type (as many as the chosen range) */
.gw-bf-types-wrap:empty { display: none; }
.gw-bf-types-wrap .gw-bf-note { margin: 6px 0 12px; }
.gw-bf-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; animation: gw-bf-in .3s ease; }
.gw-bf-type { position: relative; display: flex; align-items: center; }
.gw-bf-type > span { position: absolute; left: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--bg-f2f2f2, #f2f2f2); font-size: 12px; font-weight: 900; color: var(--fg-6f6f6b, #6f6f6b); pointer-events: none; }
.gw-bf-type .gw-bf-in { padding: 11px 12px 11px 42px; font-size: 15.5px; }
.gw-bf-type:has(.gw-bf-in:not(:placeholder-shown)) > span { background: var(--bg-c6fd50, #c6fd50); color: var(--fg-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311}
@media (max-width: 809.98px) { .gw-bf-types { grid-template-columns: 1fr 1fr; } }
/* 6 boxes per row */
.gw-bf-types { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.gw-bf-type > span { left: 9px; width: 21px; height: 21px; border-radius: 5px; font-size: 11.5px; }
.gw-bf-type .gw-bf-in { padding: 11px 6px 11px 34px; font-size: 14.5px; }
@media (max-width: 1099.98px) { .gw-bf-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 809.98px) { .gw-bf-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* cursor under the end of "Shop": the word stays readable */
.gw-bf-mk-cursor { top: 2.3em; }   /* on the "Shop" link (no promo bar above the menu any more) */

/* 4 parts in the head */
.gw-bf-axes { grid-template-columns: repeat(4, 1fr); }
/* domain: the field + ideas from the business name */
.gw-bf-domain { max-width: 420px; font-weight: 700; text-transform: lowercase; }
.gw-bf-sug-t { margin: 16px 0 10px; font-weight: 500; color: var(--fg-6f6f6b, #6f6f6b); }
.gw-bf-sugs { display: flex; flex-wrap: wrap; gap: 8px; }
.gw-bf-sug { height: 36px; padding: 0 12px; border: 1.5px solid var(--bd-dadad6, #dadad6); border-radius: 8px; background: var(--bg-ffffff, #ffffff); color: var(--fg-131311, #131311); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.gw-bf-sug:hover { border-color: var(--bd-131311, #131311); }
.gw-bf-sug.is-on { border-color: var(--bd-131311, #131311); background: var(--bg-c6fd50, #c6fd50); box-shadow: 2px 2px 0 var(--sh-131311, #131311);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-sub .gw-bf-slots-tip { margin-top: 12px; }
/* "Recommended" on the Groweber choice */
.gw-bf-rec { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 5px; background: var(--bg-131311, #131311); color: var(--fg-c6fd50, #c6fd50); font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; vertical-align: 2px; }

/* question 13: a small browser, only the tabs and the address bar */
.gw-bf-mk-mini { margin: 0 0 26px; }
.gw-bf-mk-mini .gw-bf-mk-win { aspect-ratio: auto; font-size: calc(100cqw / 62); box-shadow: 0 1.2em 3em var(--sh-131311-a12, rgba(19, 19, 17, 0.12)), 0 .2em .6em var(--sh-131311-a6, rgba(19, 19, 17, 0.06)), 0 0 0 .07em var(--sh-131311-a10, rgba(19, 19, 17, 0.1)); border-radius: 1em; }
.gw-bf-mk-mini .gw-bf-mk-bar { border-bottom: 0; height: 4.2em; }
.gw-bf-mk-mini .gw-bf-mk-tab.is-on { width: auto; min-width: 14em; max-width: 22em; }
.gw-bf-mk-mini .gw-bf-mk-tab.is-on > span { overflow: hidden; text-overflow: ellipsis; }
.gw-bf-mk-mini .gw-bf-mk-tab-3 i { background: var(--bg-34a853, #34a853); }
.gw-bf-mk-mini .gw-bf-mk-tab:nth-child(3) i { background: radial-gradient(circle at 30% 107%, var(--bg-fdf497, #fdf497) 0%, var(--bg-fd5949, #fd5949) 45%, var(--bg-d6249f, #d6249f) 60%, var(--bg-285aeb, #285aeb) 90%);--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-mk-mini .gw-bf-mk-url { height: 2.8em; font-size: 1.3em; }
.gw-bf-mk-mini .gw-bf-mk-url > span { color: var(--fg-a3a39e, #a3a39e); margin-right: -.7em; }
.gw-bf-dm-url { color: var(--fg-131311, #131311); font-weight: 700; }
@media (max-width: 809.98px) { .gw-bf-mk-mini .gw-bf-mk-tab:not(.is-on), .gw-bf-mk-mini .gw-bf-mk-plus { display: none; } .gw-bf-mk-mini .gw-bf-mk-win { font-size: calc(100cqw / 40); } }

/* plan switch (Plan 1 · Showcase / Plan 2 · E-commerce) at the top of the brief */
.gw-bf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.gw-bf-top .gw-bf-eyebrow { margin: 0; }
.gw-bf-plan { display: inline-flex; padding: 3px; border: 1.5px solid var(--bd-dadad6, #dadad6); border-radius: 10px; background: var(--bg-ffffff, #ffffff); }
.gw-bf-plan button { height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--fg-6f6f6b, #6f6f6b); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.gw-bf-plan button:hover { color: var(--fg-131311, #131311); }
.gw-bf-plan button.is-on { background: var(--bg-131311, #131311); color: var(--fg-ffffff, #ffffff); }
/* the little arrow of the menu points at the open link */
.gw-bf-mk-dd::before, .gw-bf-mk.is-many .gw-bf-mk-dd::before { left: var(--arrow, 6.6em); }
/* services example (doctor): "Book an appointment" in the header, line icons */
.gw-bf-mk-book { margin-left: auto; padding: .7em 1.2em; border-radius: .6em; background: var(--bg-dcd7ce, #dcd7ce); color: var(--fg-8c877e, #8c877e); font-size: 1.1em; font-weight: 800; white-space: nowrap; }
.gw-bf-mk-art.is-line svg { fill: none; stroke: var(--fg-bdb8af, #bdb8af); stroke-width: 1.3; stroke-linecap: round; }
.gw-bf-mk-cards svg { stroke-linecap: round; }

/* "Switch plan?" confirmation */
.gw-bf-switch { max-width: 400px; }
.gw-bf-switch .gw-out-actions [data-yes] { background: var(--bg-131311, #131311); color: var(--fg-ffffff, #ffffff); }
.gw-bf-switch .gw-out-actions [data-yes]:hover { background: var(--bg-2a2a27, #2a2a27); }

/* Plan 1 example: the whole "Services" page, styled like allardstudio.com (one of our Plan 1 websites) */
.gw-bf-al { --ol: var(--fg-666d57, #666d57); --cream: var(--fg-f7f5ee, #f7f5ee); --dark: var(--fg-161e05, #161e05); background: var(--bg-e5e1d8, #e5e1d8); padding: 1.4em 2.2em 0; }
.gw-bf-mk.is-page .gw-bf-mk-page::after { display: none; }
.gw-bf-al-hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 4.8em; padding: 0 1.4em; border-radius: .9em; background: var(--cream); }
.gw-bf-al-hdr nav { display: flex; gap: 1.8em; font-size: .95em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-6f6f63, #6f6f63); }
.gw-bf-al-hdr nav .is-on { color: var(--dark); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: .12em; }
.gw-bf-al-logo { display: flex; flex-direction: column; align-items: center; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 1.9em; font-weight: 500; line-height: 1; color: var(--dark); letter-spacing: -.01em; }
.gw-bf-al-logo small { margin-top: .15em; font-size: .42em; font-weight: 400; letter-spacing: .04em; color: var(--fg-6f6f63, #6f6f63); }
.gw-bf-al-book { justify-self: end; display: inline-flex; align-items: center; gap: .8em; height: 2.9em; padding: 0 .4em 0 1.1em; border: .1em solid var(--dark); border-radius: .6em; font-size: .9em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dark); }
.gw-bf-al-book i, .gw-bf-al-cta i { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--dark); color: var(--cream); }
.gw-bf-al-book svg, .gw-bf-al-cta svg { width: 1.2em; height: 1.2em; }
.gw-bf-al-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3em; align-items: end; padding: 2.4em .6em 2em; }
.gw-bf-al-intro h3 { margin: 0; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 3.4em; font-weight: 400; line-height: 1.04; letter-spacing: -.02em; color: var(--dark); }
.gw-bf-al-intro p { margin: 0 0 1.1em; font-size: 1.2em; line-height: 1.45; color: var(--fg-3d4232, #3d4232); }
.gw-bf-al-cta { display: inline-flex; align-items: center; gap: .9em; height: 3.1em; padding: 0 .45em 0 1.3em; border-radius: .6em; background: var(--dark); color: var(--cream); font-size: .95em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.gw-bf-al-cta i { background: var(--cream); color: var(--dark); }
.gw-bf-al-grid { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 1.2em; height: 24em; }
.gw-bf-al-col { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.gw-bf-al-card { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .45em; min-height: 0; padding: 1.2em 1.3em; border-radius: 1em; background: var(--ol); color: var(--cream); position: relative; }
.gw-bf-al-num { position: absolute; top: 1.1em; left: 1.2em; display: grid; place-items: center; width: 2.4em; height: 2.4em; border: .1em solid var(--bd-f7f5ee-a55, rgba(247, 245, 238, 0.55)); border-radius: 50%; font-size: .95em; }
.gw-bf-al-card b { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 1.85em; font-weight: 500; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-bf-al-card small { font-size: 1.05em; color: var(--fg-f7f5ee-a80, rgba(247, 245, 238, 0.8)); }
.gw-bf-al-photo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; border-radius: 1em; overflow: hidden;
  background: radial-gradient(circle at 70% 20%, var(--bg-f3d9c2, #f3d9c2) 0 18%, transparent 45%), radial-gradient(circle at 30% 80%, var(--bg-c9b49b, #c9b49b) 0 15%, transparent 50%), linear-gradient(160deg, var(--bg-e9ddd0, #e9ddd0), var(--bg-b9a48d, #b9a48d) 60%, var(--bg-8e7a66, #8e7a66));--fg-131311:#131311;--fg-1c1d1a:#1c1d1a;--fg-000000:#000000;--fg-2a2a27:#2a2a27;--fg-41413f:#41413f;--fg-20201d:#20201d;--fg-1c1c1a:#1c1c1a;--fg-52524e:#52524e;--fg-6f6f6b:#6f6f6b;--fg-6c6c6a:#6c6c6a;--bg-fafafa:#fafafa;--bg-ffffff:#ffffff;--bg-f4f4f4:#f4f4f4;--bg-f3f2ea:#f3f2ea;--bg-f2f2f2:#f2f2f2;--bg-eaeaea:#eaeaea;--bg-dfdfdf:#dfdfdf;--bd-131311:#131311;--bd-dfdfdf:#dfdfdf;--bd-e4e4e0:#e4e4e0;--sh-131311:#131311;color:var(--fg-131311, #131311)}
.gw-bf-al-photo > svg { position: absolute; right: 1em; bottom: 1em; width: 5em; height: 5em; fill: none; stroke: var(--fg-f7f5ee-a70, rgba(247, 245, 238, 0.7)); stroke-width: 1.2; stroke-linecap: round; }
.gw-bf-al-bubble { display: grid; place-items: center; width: 9.5em; height: 9.5em; padding: 1em; border: .1em solid var(--bd-f7f5ee-a80, rgba(247, 245, 238, 0.8)); border-radius: 50%; background: var(--bg-666d57-a12, rgba(102, 109, 87, 0.12)); backdrop-filter: blur(.3em); color: var(--cream); font-size: 1.05em; text-align: center; line-height: 1.3; }
.gw-bf-al-bubble + .gw-bf-al-bubble { width: 7em; height: 7em; }
/* more than 4 services: compact cards (number and name on one line) */
.gw-bf-mk.is-compact .gw-bf-al-col { gap: .7em; }
.gw-bf-mk.is-compact .gw-bf-al-card { flex-direction: row; align-items: center; justify-content: flex-start; gap: .8em; padding: .5em .9em; }
.gw-bf-mk.is-compact .gw-bf-al-num { position: static; flex: none; width: 2.1em; height: 2.1em; font-size: .85em; }
.gw-bf-mk.is-compact .gw-bf-al-card b { font-size: 1.35em; }
.gw-bf-mk.is-compact .gw-bf-al-card small { display: none; }
.gw-bf-mk.is-mine .gw-bf-al-card { animation: gw-bf-mk-pop .35s ease both; }
/* only the services stand out: the rest of the page stays discreet */
.gw-bf-al-hdr, .gw-bf-al-intro, .gw-bf-al-photo { opacity: .38; filter: grayscale(.5); }
.gw-bf-al-card { box-shadow: 0 .6em 1.4em var(--sh-161e05-a22, rgba(22, 30, 5, 0.22)), 0 0 0 .12em var(--sh-161e05-a25, rgba(22, 30, 5, 0.25)); }

/* Services page example without text: grey shapes in place of the words */
.gw-bf-al-logo { flex-direction: column; gap: .35em; }
.gw-bf-al-logo i { display: block; width: 9em; height: 1.1em; border-radius: .5em; background: var(--bg-c9c5bb, #c9c5bb); }
.gw-bf-al-logo i + i { width: 5.5em; height: .55em; }
.gw-bf-al-line { display: block; width: 6.5em; height: .7em; border-radius: .4em; background: currentColor; opacity: .45; }
.gw-bf-al-book i.gw-bf-al-line, .gw-bf-al-cta i.gw-bf-al-line { width: 6.5em; height: .7em; border-radius: .4em; background: currentColor; }
.gw-bf-al-cta .gw-bf-al-line { width: 8em; opacity: .6; }
.gw-bf-al-lines { display: flex; flex-direction: column; gap: .7em; margin-bottom: 1.2em; }
.gw-bf-al-lines i { display: block; height: .85em; border-radius: .45em; background: var(--bg-b9b4a8, #b9b4a8); }
.gw-bf-al-lines i:nth-child(2) { width: 92%; } .gw-bf-al-lines i:nth-child(3) { width: 60%; }
.gw-bf-al-lines.is-big { gap: 1em; margin: 0; }
.gw-bf-al-lines.is-big i { height: 2.6em; border-radius: .7em; background: var(--bg-a7a296, #a7a296); }
.gw-bf-al-lines.is-big i:first-child { width: 85%; } .gw-bf-al-lines.is-big i:nth-child(2) { width: 62%; }

/* ---------- "Which colors?": the example website of the plan, painted with the colors picked (--cm-* set by brief.js).
   The other example websites (questions 9 and 10) take the same colors once some are picked: class gw-bf-mk-tinted ---------- */
.gw-bf-mk-colors { margin-top: 22px; }
.gw-bf-mk-colors :is(.gw-bf-mk-dd, .gw-bf-mk-cursor) { display: none; }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease; }
/* store (Plan 2) */
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-tab.is-on i, :is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-av { background: var(--cm-accent); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-promo { background: var(--cm-main); color: var(--cm-main-on); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-logo { color: var(--cm-main); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-logo span { color: var(--cm-accent); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-hdr nav .is-on { color: var(--cm-main); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-hdr nav .is-on::after { background: var(--cm-accent); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-icons svg { stroke: var(--cm-main); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-icons em { background: var(--cm-accent); color: var(--cm-accent-on); border-color: var(--cm-main); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-hero { background: var(--cm-main); color: var(--cm-main-on); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-hero small { color: var(--cm-accent); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-cta { background: var(--cm-accent); color: var(--cm-accent-on); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-art { background: var(--cm-accent); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-art svg { fill: var(--cm-deep); stroke: var(--cm-deep); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-cards span { background: color-mix(in srgb, var(--cm-soft) 40%, #ffffff); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-mk-cards svg { stroke: var(--cm-deep); }
/* Services page (Plan 1) */
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al { --ol: var(--cm-accent); --cream: color-mix(in srgb, var(--cm-soft) 8%, #ffffff); --dark: var(--cm-main); background: color-mix(in srgb, var(--cm-soft) 16%, #ffffff); }
.gw-bf-mk-colors :is(.gw-bf-al-hdr, .gw-bf-al-intro, .gw-bf-al-photo) { opacity: 1; filter: none; }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al-logo i, :is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al-lines.is-big i { background: var(--cm-main); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al-lines i { background: color-mix(in srgb, var(--cm-main) 28%, #ffffff); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al-cta { color: var(--cm-main-on); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al-card { color: var(--cm-accent-on); }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al-card small { color: inherit; opacity: .8; }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al-num { border-color: currentColor; }
:is(.gw-bf-mk-colors, .gw-bf-mk-tinted) .gw-bf-al-photo { background: var(--cm-deep); }
/* the example is not veiled here: the colors are the point */
.gw-bf-mk-colors .gw-bf-mk-page::after { display: none; }
.gw-bf-mk-colors .gw-bf-mk-cards b { color: var(--gw-text); }
.gw-bf-mk-colors .gw-bf-mk-cards small { color: var(--gw-text-muted); }
.gw-bf-mk-colors .gw-bf-mk-hdr nav { color: var(--gw-text-muted); }
/* store: no promo bar, no picture in the banner, products without prices */
.gw-bf-mk-colors :is(.gw-bf-mk-promo, .gw-bf-mk-art), .gw-bf-mk-colors .gw-bf-mk-cards small:empty { display: none; }
.gw-bf-mk-colors:not(.is-page) .gw-bf-mk-page { padding-top: 1em; }

/* ---------- Plan 1 · "Show your prices?": a Pricing page with three plans (hidden with "No") ---------- */
.gw-bf-mk-prices { margin-top: 22px; }
.gw-bf-pr-head { display: flex; justify-content: center; padding: 2.4em 0 2em; }
.gw-bf-pr-head .gw-bf-al-lines.is-big { width: 34em; align-items: center; }
.gw-bf-pr-head .gw-bf-al-lines.is-big i { width: 100%; }
.gw-bf-pr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; padding: 0 4em; align-items: end; }
.gw-bf-pr-card { display: flex; flex-direction: column; gap: 1.2em; padding: 2em 1.8em; border-radius: 1.2em; background: var(--cream); color: var(--dark); box-shadow: 0 .6em 1.4em var(--sh-161e05-a12, rgba(22, 30, 5, 0.12)), 0 0 0 .12em var(--sh-161e05-a15, rgba(22, 30, 5, 0.15)); animation: gw-bf-mk-pop .35s ease both; }
.gw-bf-pr-card.is-hot { padding-top: 3em; background: var(--ol); color: var(--cream); }
.gw-bf-pr-card b { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 2em; font-weight: 500; line-height: 1; }
.gw-bf-pr-price { font-size: 2.6em; font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.gw-bf-pr-card .gw-bf-al-lines { margin: 0; }
.gw-bf-pr-card.is-hot .gw-bf-al-lines i { background: currentColor; opacity: .45; }
.gw-bf-pr-btn { display: grid; place-items: center; height: 3em; border-radius: .7em; border: .12em solid currentColor; }
.gw-bf-pr-card.is-hot .gw-bf-pr-btn { background: var(--cream); color: var(--dark); border-color: var(--cream); }
@media (max-width: 809.98px) { .gw-bf-pr-cards { padding: 0 1em; gap: 1em; } .gw-bf-pr-card { padding: 1.4em 1.2em; } }
/* Pricing page (Plan 1, question 10) in the colors picked */
.gw-bf-mk-tinted .gw-bf-pr-card.is-hot { color: var(--cm-accent-on); }
.gw-bf-mk-tinted .gw-bf-pr-card.is-hot .gw-bf-pr-btn { background: var(--cm-accent-on); color: var(--cm-accent); border-color: var(--cm-accent-on); }
/* logo "Yes": the photos, or a few words instead */
.gw-bf-logo-or { margin-top: 18px; }
.gw-bf-logo-text { max-width: 560px; min-height: 0; }
/* question 9 (store): the open Shop menu in front, with a clear edge */
.gw-bf-mk-dd { box-shadow: 0 2em 5em var(--sh-131311-a28, rgba(19, 19, 17, 0.28)), 0 0 0 .14em var(--sh-131311, #131311); }
.gw-bf-mk-dd::before { box-shadow: -.14em -.14em 0 0 var(--sh-131311, #131311); }
/* …and the menu bar of the example too, except the open "Shop" link */
.gw-bf-mk:not(.gw-bf-mk-colors):not(.is-page) :is(.gw-bf-mk-logo, .gw-bf-mk-icons, .gw-bf-mk-hdr nav span:not(.is-on)) { opacity: .4; filter: blur(.12em); }

/* ---------- question 11 · hosting: the client's website, hosted and watched by Groweber (hidden with "I host it myself") ---------- */
.gw-bf-mk-hosting { margin-top: 22px; }
.gw-bf-mk-hosting .gw-bf-mk-win { aspect-ratio: auto; }
.gw-bf-mk-hosting .gw-bf-mk-page::after { display: none; }   /* no veil: the whole page is the point */
.gw-bf-ho-url em { margin-inline-start: auto; padding: .25em .8em; border-radius: 1em; background: color-mix(in srgb, var(--gw-success) 14%, var(--gw-surface)); color: var(--gw-success); font-style: normal; font-size: .85em; font-weight: 700; white-space: nowrap; }
.gw-bf-ho-url svg { color: var(--gw-success); }
.gw-bf-ho { height: auto; padding: 3em 4em 3.4em; background: var(--gw-surface); color: var(--gw-text); }
.gw-bf-ho-head { display: flex; align-items: center; gap: 1.6em; }
.gw-bf-ho-head b { display: block; font-size: 2.2em; font-weight: 900; letter-spacing: -.02em; }
.gw-bf-ho-head small { font-size: 1.25em; color: var(--gw-text-muted); }
.gw-bf-ho-free { margin-inline-start: auto; padding: .6em 1.2em; border: .12em solid var(--gw-ink); border-radius: .8em; background: var(--gw-accent); color: var(--gw-on-accent); font-size: 1.15em; font-weight: 800; white-space: nowrap; box-shadow: .2em .2em 0 var(--gw-ink); }
.gw-bf-ho-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em; margin-top: 2.6em; }
.gw-bf-ho-tile { display: flex; flex-direction: column; gap: .5em; padding: 1.6em; border: .1em solid var(--gw-line); border-radius: 1.2em; background: var(--gw-page); }
.gw-bf-ho-tile i { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin-bottom: .4em; border-radius: 50%; background: var(--gw-accent); color: var(--gw-on-accent); }
.gw-bf-ho-tile i svg { width: 1.5em; height: 1.5em; }
.gw-bf-ho-tile b { font-size: 1.35em; font-weight: 800; }
.gw-bf-ho-tile small { font-size: 1.05em; line-height: 1.35; color: var(--gw-text-muted); }
.gw-bf-ho-uptime { display: flex; align-items: center; gap: 2em; margin-top: 1.8em; padding: 1.4em 1.8em; border: .1em solid var(--gw-line); border-radius: 1.2em; }
.gw-bf-ho-uptime b { display: block; font-size: 1.3em; font-weight: 800; color: var(--gw-success); }
.gw-bf-ho-uptime small { font-size: 1em; color: var(--gw-text-muted); white-space: nowrap; }
.gw-bf-ho-bars { flex: 1; display: flex; gap: .35em; height: 2.6em; }
.gw-bf-ho-bars i { flex: 1; border-radius: .25em; background: var(--gw-success); opacity: .75; }
.gw-bf-ho-bars i.is-now { opacity: 1; }
.gw-bf-ho-uptime strong { font-size: 1.8em; font-weight: 900; }
@media (max-width: 809.98px) { .gw-bf-ho { padding: 2em; } .gw-bf-ho-grid { grid-template-columns: 1fr 1fr; } .gw-bf-ho-free { display: none; } .gw-bf-mk-hosting .gw-bf-mk-win { font-size: calc(100cqw / 52); } }

/* ---------- Plan 2 · question 10: the admin dashboard of the store, "Add product" (accent: the colors of question 7 when picked) ---------- */
.gw-bf-mk-admin { margin-top: 22px; --ad-accent: var(--cm-accent, var(--gw-accent)); --ad-on: var(--cm-accent-on, var(--gw-on-accent)); }
.gw-bf-mk-admin .gw-bf-mk-win { aspect-ratio: auto; }
.gw-bf-mk-admin .gw-bf-mk-page::after { display: none; }
.gw-bf-ad { display: grid; grid-template-columns: 15em minmax(0, 1fr) 22em; height: auto; background: var(--gw-page); color: var(--gw-text); }
.gw-bf-ad-side { display: flex; flex-direction: column; gap: 2em; padding: 2.2em 1.6em; background: var(--gw-ink); color: var(--gw-on-ink); }
.gw-bf-ad-logo { font-size: 1.7em; font-weight: 900; letter-spacing: -.02em; }
.gw-bf-ad-side nav { display: flex; flex-direction: column; gap: .5em; }
.gw-bf-ad-side nav span { display: flex; align-items: center; gap: .9em; padding: .8em 1em; border-radius: .8em; font-size: 1.15em; font-weight: 600; opacity: .65; }
.gw-bf-ad-side nav i { width: 1.1em; height: 1.1em; border-radius: .3em; background: currentColor; opacity: .7; }
.gw-bf-ad-side nav .is-on { background: var(--ad-accent); color: var(--ad-on); opacity: 1; }
.gw-bf-ad-side nav em { margin-inline-start: auto; padding: 0 .55em; border-radius: 1em; background: var(--gw-on-ink); color: var(--gw-ink); font-style: normal; font-size: .85em; font-weight: 800; }
.gw-bf-ad-main { padding: 2.2em 2.4em; }
.gw-bf-ad-main header { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.6em; }
.gw-bf-ad-main header b { display: block; font-size: 2em; font-weight: 900; letter-spacing: -.02em; }
.gw-bf-ad-main header small { font-size: 1.1em; color: var(--gw-text-muted); }
.gw-bf-ad-add { padding: .75em 1.3em; border: .12em solid var(--gw-ink); border-radius: .8em; background: var(--ad-accent); color: var(--ad-on); font-size: 1.15em; font-weight: 800; white-space: nowrap; box-shadow: .25em .25em 0 var(--gw-ink); }
.gw-bf-ad-rows { overflow: hidden; border: .1em solid var(--gw-line); border-radius: 1.2em; background: var(--gw-surface); }
.gw-bf-ad-row { display: grid; grid-template-columns: 3.6em 1fr auto auto; align-items: center; gap: 1.4em; padding: .9em 1.4em; font-size: 1.1em; }
.gw-bf-ad-row + .gw-bf-ad-row { border-top: .1em solid var(--gw-line); }
.gw-bf-ad-img { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: .8em; background: var(--gw-surface-2); }
.gw-bf-ad-img svg { width: 2em; height: 2em; fill: none; stroke: var(--gw-text); stroke-width: 1.4; stroke-linejoin: round; }
.gw-bf-ad-row b { font-weight: 800; }
.gw-bf-ad-row span { color: var(--gw-text-muted); font-weight: 600; }
.gw-bf-ad-row em { padding: .25em .7em; border-radius: 1em; background: color-mix(in srgb, var(--gw-success) 14%, var(--gw-surface)); color: var(--gw-success); font-style: normal; font-size: .85em; font-weight: 700; white-space: nowrap; }
.gw-bf-ad-form { display: flex; flex-direction: column; gap: 1.1em; margin: 1.6em 1.6em 1.6em 0; padding: 1.8em; border: .14em solid var(--gw-ink); border-radius: 1.2em; background: var(--gw-surface); box-shadow: 0 1.6em 3.6em var(--gw-shadow); animation: gw-bf-mk-pop .35s ease both; }
.gw-bf-ad-form > b { font-size: 1.5em; font-weight: 900; }
.gw-bf-ad-photo { display: grid; place-items: center; height: 7em; border: .14em dashed var(--gw-line); border-radius: 1em; font-size: 2em; color: var(--gw-text-muted); }
.gw-bf-ad-photo small { margin-top: -.6em; font-size: .45em; font-weight: 700; }
.gw-bf-ad-form label { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.gw-bf-ad-form label small { font-size: .95em; font-weight: 700; color: var(--gw-text-muted); }
.gw-bf-ad-form label span { padding: .7em .9em; border: .1em solid var(--gw-line); border-radius: .7em; background: var(--gw-page); font-size: 1.1em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-bf-ad-two { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.gw-bf-ad-save { padding: .8em; border-radius: .8em; background: var(--gw-ink); color: var(--gw-on-ink); font-size: 1.1em; font-weight: 800; text-align: center; }
.gw-bf-mk-admin .is-us, .gw-bf-mk-admin.is-agency .is-me { display: none; }
.gw-bf-mk-admin.is-agency .is-us { display: inline; }
@media (max-width: 809.98px) { .gw-bf-ad { grid-template-columns: minmax(0, 1fr) 20em; } .gw-bf-ad-side { display: none; } .gw-bf-mk-admin .gw-bf-mk-win { font-size: calc(100cqw / 56); } }
/* the cursor comes up from the bottom and clicks "Add product" (again and again) */
.gw-bf-ad-main { position: relative; }
.gw-bf-ad-cursor { position: absolute; z-index: 2; width: 2.6em; height: 2.6em; fill: var(--gw-ink); stroke: var(--gw-surface); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 .2em .3em rgba(0, 0, 0, .3)); pointer-events: none; animation: gw-bf-ad-move 3.6s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes gw-bf-ad-move {
  0% { right: 55%; top: 92%; opacity: 0; transform: scale(1); }
  10% { opacity: 1; }
  55% { right: 4.2em; top: 3.4em; transform: scale(1); }
  62% { right: 4.2em; top: 3.4em; transform: scale(.82); }
  70% { right: 4.2em; top: 3.4em; transform: scale(1); }
  92% { right: 4.2em; top: 3.4em; opacity: 1; }
  100% { right: 4.2em; top: 3.4em; opacity: 0; }
}
.gw-bf-ad-add { animation: gw-bf-ad-press 3.6s ease infinite; }
@keyframes gw-bf-ad-press {
  0%, 58% { transform: none; box-shadow: .25em .25em 0 var(--gw-ink); }
  62% { transform: translate(.2em, .2em); box-shadow: 0 0 0 var(--gw-ink); }
  70%, 100% { transform: none; box-shadow: .25em .25em 0 var(--gw-ink); }
}
html[dir="rtl"] .gw-bf-ad-cursor { animation-name: gw-bf-ad-move-rtl; transform-origin: top left; }
@keyframes gw-bf-ad-move-rtl {
  0% { left: 55%; top: 92%; opacity: 0; transform: scale(1); }
  10% { opacity: 1; }
  55% { left: 4.2em; top: 3.4em; transform: scale(1); }
  62% { left: 4.2em; top: 3.4em; transform: scale(.82); }
  70% { left: 4.2em; top: 3.4em; transform: scale(1); }
  92% { left: 4.2em; top: 3.4em; opacity: 1; }
  100% { left: 4.2em; top: 3.4em; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gw-bf-ad-cursor, html[dir="rtl"] .gw-bf-ad-cursor, .gw-bf-ad-add { animation: none; } .gw-bf-ad-cursor { right: 4.2em; top: 3.4em; } }
/* "Which colors?" with no color picked (or "Not sure yet"): the example website is blurred */
.gw-bf-mk-colors .gw-bf-mk-page { transition: filter .35s ease, opacity .35s ease; }
.gw-bf-mk-colors.is-empty .gw-bf-mk-page { filter: blur(.18em) grayscale(.3); opacity: .7; }

/* question 9 (store), once each time the question opens: the cursor comes up from the bottom, clicks "Shop", then the menu opens */
.gw-bf-mk:not(.gw-bf-mk-colors):not(.is-page) .gw-bf-mk-cursor { animation: gw-bf-cur-in 1.5s cubic-bezier(.45, 0, .25, 1) .3s both; }
@keyframes gw-bf-cur-in {
  0% { transform: translate(-6em, 24em); opacity: 0; }
  12% { opacity: 1; }
  72% { transform: none; }
  84% { transform: scale(.8); }
  100% { transform: none; opacity: 1; }
}
.gw-bf-mk:not(.gw-bf-mk-colors):not(.is-page) .gw-bf-mk-dd { animation: gw-bf-mk-open .3s ease 1.6s both; }
.gw-bf-mk:not(.gw-bf-mk-colors):not(.is-page) .gw-bf-mk-page::after { animation: gw-bf-veil-in .3s ease 1.6s both; }
.gw-bf-mk:not(.gw-bf-mk-colors):not(.is-page) :is(.gw-bf-mk-logo, .gw-bf-mk-icons, .gw-bf-mk-hdr nav span:not(.is-on)) { animation: gw-bf-blur-in .3s ease 1.6s both; }
@keyframes gw-bf-veil-in { from { opacity: 0; } }
@keyframes gw-bf-blur-in { from { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .gw-bf-mk:not(.gw-bf-mk-colors):not(.is-page) :is(.gw-bf-mk-cursor, .gw-bf-mk-dd, .gw-bf-mk-logo, .gw-bf-mk-icons, .gw-bf-mk-hdr nav span),
  .gw-bf-mk:not(.gw-bf-mk-colors):not(.is-page) .gw-bf-mk-page::after { animation: none; }
}
/* hosting: the 30 days of uptime load one after the other, then 99.9% appears (once each time the question opens) */
.gw-bf-ho-bars i { transform-origin: bottom; animation: gw-bf-bar-in .3s ease both; animation-delay: calc(.3s + var(--i, 0) * 45ms); }
@keyframes gw-bf-bar-in { from { transform: scaleY(0); opacity: 0; } }
.gw-bf-ho-uptime strong { animation: gw-bf-veil-in .4s ease 1.7s both; }
@media (prefers-reduced-motion: reduce) { .gw-bf-ho-bars i, .gw-bf-ho-uptime strong { animation: none; } }