/* ✅ MK 2026-10-31 the new homeowner form (/get-bids) - approved mockup post-flow-v4. Two layouts (Admin picks or A/B tests):
   .gb-win = one centered window over a soft blurred photo; .gb-full = a full page (slim header, centered column, Back / Next
   pinned to the bottom). On phones both are a full screen. */
:root { --ink:#181512; --or:#ea6a16; --or2:#c8510c; --tint:#fff6ef; --line:#e7e3dd; --mut:#6b645c; --soft:#f6f4f1; --good:#15803d; --bad:#b42318; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body.gb { font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:#2a2622; -webkit-font-smoothing:antialiased; }
body.gb-full { background:#fff; }
.gb-bg { position:fixed; inset:0; background-position:center; background-size:cover; filter:blur(6px) brightness(.55); transform:scale(1.06); }
.gb-shell { position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:clamp(24px, 8vh, 80px) 16px 24px; }   /* MK 10-31: a fixed top edge - only the bottom grows/shrinks between steps, the headline stays put */
.gb-win { position:relative; width:100%; max-width:620px; max-height:100%; background:#fff; border-radius:16px; display:flex; flex-direction:column; overflow:hidden; animation:gb-pop .32s cubic-bezier(.2,.8,.2,1); }
@keyframes gb-pop { from { opacity:0; transform:translateY(14px) scale(.985); } }
/* MK 10-31 "it opens small then changes size": the window stays hidden until its first question is in place (at full size),
   then pops in once; if the script never runs it shows anyway after 2.5 s */
.gb-win.is-wait { visibility:hidden; animation:gb-failsafe 0s linear 2.5s forwards; }
@keyframes gb-failsafe { to { visibility:visible; } }
.gb-head { display:none; }
.gb-logo { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.gb-logo i { width:32px; height:32px; border-radius:8px; background:var(--ink); color:#fff; font:800 12.5px Inter, system-ui, sans-serif; font-style:normal; display:grid; place-items:center; position:relative; }
.gb-logo i::after { content:""; position:absolute; right:-3px; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--or); border:2px solid #fff; }
.gb-head-trust { display:flex; gap:18px; font-size:14px; color:var(--mut); font-weight:600; }
.gb-head-trust span { display:inline-flex; gap:6px; align-items:center; } .gb-head-trust svg { width:16px; height:16px; color:#16a34a; }
.gb-top { position:relative; padding:14px 22px 0; text-align:center; flex:none; }
.gb-x { position:absolute; z-index:3; right:12px; top:10px; width:36px; height:36px; border:0; background:transparent; border-radius:50%; cursor:pointer; display:grid; place-items:center; color:var(--mut); transition:background .15s, color .15s; }
.gb-x:hover { background:var(--soft); color:var(--ink); } .gb-x:active { transform:scale(.96); } .gb-x svg { width:20px; height:20px; } .gb-x[hidden] { display:none; }
.gb-icons { display:flex; justify-content:center; align-items:center; height:44px; margin-bottom:10px; }
.gb-icons span { width:44px; height:44px; border-radius:50%; background:var(--tint); color:var(--or); display:grid; place-items:center; border:3px solid #fff; margin-left:-10px; }
.gb-icons span:first-child { margin-left:0; } .gb-icons span svg { width:20px; height:20px; }
.gb-icons span:nth-child(2) { background:#eef4ff; color:#2f5fb3; } .gb-icons span:nth-child(3) { background:#eefaf2; color:#1f8a4c; } .gb-icons span:nth-child(4) { background:#f4f0ff; color:#6b48c8; }
.gb-icons.is-one { gap:10px; } .gb-icons.is-one span { background:var(--tint); color:var(--or); }
.gb-icons.is-one b { font-size:15px; font-weight:700; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gb-change, .gb-where a { color:var(--or2); font-weight:600; font-size:13.5px; text-decoration:none; }
.gb-change:hover, .gb-where a:hover { text-decoration:underline; }
.gb-prog { height:6px; background:#f0ede8; border-radius:999px; max-width:420px; margin:0 auto; overflow:hidden; }
.gb-prog i { display:block; height:100%; width:4%; background:var(--or); border-radius:999px; transition:width .45s cubic-bezier(.2,.8,.2,1); }
.gb-where { margin:10px auto 0; display:flex; justify-content:center; align-items:center; gap:6px; font-size:13.5px; color:var(--mut); min-height:22px; }
.gb-where b { color:var(--ink); font-weight:600; } .gb-where svg { width:15px; height:15px; color:var(--or); }
/* the question area slides between screens and fits each one (gb-win) */
/* MK 10-31 "smooth the move between each step": one clean hand-off - the old question fades + slides out quickly, the new
   one glides in a beat later (they never sit on top of each other), the window eases to the new height in step */
.gb-body { flex:none; position:relative; overflow:hidden; height:300px; transition:height .36s cubic-bezier(.22,.61,.36,1); }
/* MK 10-31 "the headline of each step kinda shakes": no sideways slide (bold text shimmers at half pixels while it moves) -
   the new question fades up 8px; the scrollbar's room is kept on both sides so a long list never nudges the centered headline */
.gb-step { position:absolute; top:0; left:0; right:0; max-height:100%; overflow-y:auto; overscroll-behavior:contain; padding:12px 22px 22px;
  scrollbar-gutter:stable both-edges; transition:transform .32s cubic-bezier(.22,.61,.36,1) .1s, opacity .26s ease .1s; }
.gb-step.in-r, .gb-step.in-l { transform:translateY(8px); opacity:0; }
.gb-step.is-out { pointer-events:none; transition:transform .18s ease-in, opacity .14s ease; }
.gb-step.out-l, .gb-step.out-r { transform:translateY(-4px); opacity:0; }
.gb-fade { animation:gb-fade .3s ease both; }
@keyframes gb-fade { from { opacity:0; transform:translateY(-3px); } }
.gb-row { transition:background .15s, transform .12s; } .gb-row:active { transform:scale(.995); }
.gb-q { font-size:26px; line-height:1.2; font-weight:800; letter-spacing:-.025em; text-align:center; margin:2px auto 4px; max-width:480px; }
.gb-hint { text-align:center; color:var(--mut); font-size:15px; line-height:1.45; margin:0 auto 16px; max-width:480px; }
/* answers: one list with lines between */
.gb-list { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.gb-row { display:flex; width:100%; align-items:center; gap:14px; min-height:54px; padding:12px 18px; border:0; border-top:1px solid var(--line); background:#fff; text-align:left; cursor:pointer; font:500 16.5px Inter, system-ui, sans-serif; color:var(--ink); transition:background .15s; }
.gb-row:first-child { border-top:0; } .gb-row:hover { background:#fbfaf8; } .gb-row:focus-visible { outline:2px solid var(--or); outline-offset:-2px; }
.gb-row small { display:block; color:var(--mut); font-size:13.5px; margin-top:2px; font-weight:500; }
.gb-rd { width:22px; height:22px; border-radius:50%; border:2px solid #c9c2b8; flex:none; transition:border-color .15s, box-shadow .15s, background .15s; }
.gb-bx { width:22px; height:22px; border-radius:6px; border:2px solid #c9c2b8; flex:none; display:grid; place-items:center; color:transparent; }
.gb-bx svg { width:14px; height:14px; }
.gb-row.is-on, .gb-row.is-on:hover { background:var(--tint); }
.gb-row.is-on .gb-rd { border-color:var(--or); box-shadow:inset 0 0 0 5px #fff; background:var(--or); }
.gb-row.is-on .gb-bx { border-color:var(--or); background:var(--or); color:#fff; }
/* services: search on top, every service grouped below (scrolls inside) */
.gb-search { position:sticky; top:-12px; z-index:2; background:#fff; padding:0 0 12px; margin-top:-2px; }
/* MK 10-31 "make it clear where they start typing": a big, clearly outlined box, orange search icon, examples typing
   themselves, the caret already in it on desktop, an orange ring while typing */
.gb-sbox { display:flex; align-items:center; gap:12px; height:64px; border:2px solid #cfc6b8; border-radius:12px; padding:0 18px; transition:border-color .15s, outline-color .15s; background:#fff; cursor:text; outline:4px solid transparent; }
.gb-sbox:hover { border-color:#b9ae9e; }
.gb-sbox:focus-within { border-color:var(--or); outline-color:rgba(234,106,22,.16); }
.gb-sbox svg { width:23px; height:23px; color:var(--or); flex:none; }
.gb-sbox input { border:0; outline:0; font:500 18px Inter, system-ui, sans-serif; flex:1; min-width:0; height:100%; padding:0; color:var(--ink); background:transparent; -webkit-appearance:none; appearance:none; }
.gb-sbox input::placeholder { color:#8f877d; opacity:1; }
.gb-or { display:flex; align-items:center; gap:12px; margin:6px 2px 2px; color:var(--mut); font-size:13px; font-weight:600; }
.gb-or::before, .gb-or::after { content:""; flex:1; height:1px; background:var(--line); }
.gb-sbox input::-webkit-search-cancel-button { -webkit-appearance:none; }
.gb-grp { font-size:12.5px; font-weight:700; color:var(--mut); margin:16px 2px 8px; letter-spacing:.02em; }
.gb-svc > .gb-grp:first-child { margin-top:2px; }
.gb-srow { min-height:50px; padding:9px 14px; font-size:16px; }
.gb-ic { width:32px; height:32px; border-radius:50%; background:var(--soft); color:#5f5850; display:grid; place-items:center; flex:none; }
.gb-ic svg { width:17px; height:17px; }
.gb-srow.is-on .gb-ic { background:#ffe6d3; color:var(--or2); }
.gb-chev { margin-left:auto; color:#b8b0a5; font-size:22px; line-height:1; }
.gb-empty { text-align:center; color:var(--mut); padding:12px; font-size:15px; margin:0; }
/* inputs */
.gb-field { display:flex; align-items:center; height:58px; border:1.5px solid var(--line); border-radius:10px; padding:0 18px; transition:border-color .15s; background:#fff; }
.gb-field:focus-within { border-color:var(--or); }
.gb-field input { border:0; outline:0; font:500 18px Inter, system-ui, sans-serif; width:100%; color:var(--ink); background:transparent; -webkit-appearance:none; appearance:none; }
.gb-ta { display:block; width:100%; min-height:110px; border:1.5px solid var(--line); border-radius:10px; padding:14px 16px; font:500 16.5px Inter, system-ui, sans-serif; color:var(--ink); resize:none; outline:0; background:#fff; }
.gb-ta:focus { border-color:var(--or); }
.gb-ok { display:flex; justify-content:center; align-items:center; gap:6px; color:var(--good); font-weight:600; font-size:13.5px; margin:10px 0 0; min-height:20px; }   /* MK 10-31: green, "we found it" */
.gb-ok svg { width:15px; height:15px; color:var(--good); flex:none; }
.gb-calm { display:flex; justify-content:center; align-items:center; gap:7px; color:var(--mut); font-size:13.5px; margin:14px 0 0; }
.gb-calm svg { width:15px; height:15px; color:#16a34a; }
/* address: Street, then City + ZIP; labels float up once there is text */
.gb-addr { display:grid; gap:10px; margin:0; }
.gb-fl { position:relative; }
.gb-fl input { display:block; width:100%; height:58px; border:1.5px solid var(--line); border-radius:10px; padding:20px 16px 6px; font:500 17px Inter, system-ui, sans-serif; outline:0; color:var(--ink); background:#fff; transition:border-color .15s; -webkit-appearance:none; appearance:none; }
.gb-fl input:focus { border-color:var(--or); }
.gb-fl label { position:absolute; left:17px; top:50%; transform:translateY(-50%); color:#8f877d; font-size:16px; pointer-events:none; transition:top .15s, font-size .15s; }
.gb-fl input:focus + label, .gb-fl input:not(:placeholder-shown) + label { top:16px; font-size:12px; font-weight:600; }
.gb-fl.is-good input { padding-right:44px; }
.gb-fl.is-good::after { content:""; position:absolute; right:18px; top:50%; width:7px; height:13px; border:solid #16a34a; border-width:0 2.5px 2.5px 0; transform:translateY(-65%) rotate(45deg); }
.gb-addr2 { display:grid; grid-template-columns:minmax(0, 1fr) 150px; gap:10px; }
.gb-ac { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.gb-ac-row { display:flex; width:100%; align-items:center; gap:10px; padding:10px 14px; border:0; border-top:1px solid var(--line); background:#fff; text-align:left; cursor:pointer; font:500 15px Inter, system-ui, sans-serif; color:var(--ink); }
.gb-ac-row:first-child { border-top:0; } .gb-ac-row:hover { background:#fbfaf8; }
.gb-ac-row svg { width:16px; height:16px; color:var(--or); flex:none; } .gb-ac-row small { display:block; color:var(--mut); font-size:13px; }
.gb-ac-by { margin:0; padding:6px 14px; font-size:11.5px; color:#9a9188; text-align:right; border-top:1px solid var(--line); }
/* photos */
.gb-photos { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.gb-photos:empty { display:none; }
.gb-thumb { position:relative; width:76px; height:76px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.gb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gb-thumb button { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(24,21,18,.75); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0; }
.gb-thumb button svg { width:13px; height:13px; }
.gb-photo-add { margin-top:12px; height:72px; border:1.5px dashed #e3b994; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--or2); font-weight:700; cursor:pointer; background:#fffaf6; transition:background .15s; }
.gb-photo-add:hover { background:#fff3e8; } .gb-photo-add svg { width:20px; height:20px; } .gb-photo-add[hidden] { display:none; }
/* bottom: Back + Next */
.gb-foot { flex:none; border-top:1px solid var(--line); padding:12px 24px calc(14px + env(safe-area-inset-bottom)); background:#fff; }
.gb-foot-row { display:flex; justify-content:center; align-items:center; gap:12px; }
.gb-back { height:48px; padding:0 22px; border:0; background:transparent; font:700 16px Inter, system-ui, sans-serif; color:var(--ink); border-radius:999px; cursor:pointer; }
.gb-back:hover { background:var(--soft); } .gb-back[hidden] { display:inline-block; visibility:hidden; }
.gb-btn { height:48px; padding:0 28px; border-radius:999px; font:700 16px Inter, system-ui, sans-serif; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; border:1.5px solid transparent; transition:transform .1s, background .15s, opacity .15s; white-space:nowrap; }
.gb-btn:active { transform:scale(.98); }
.gb-btn-main { background:var(--or); color:#fff; } .gb-btn-main:hover { background:var(--or2); }
.gb-btn-ghost { background:#fff; color:var(--ink); border-color:var(--line); } .gb-btn-ghost:hover { background:var(--soft); }
.gb-next { min-width:160px; }
.gb-next[disabled] { opacity:.38; cursor:default; transform:none; background:var(--or); }
.gb-err { margin:0 0 8px; text-align:center; color:var(--bad); font-size:14px; font-weight:600; min-height:0; }
.gb-err:empty { display:none; }
.gb-err-inline { margin-top:8px; }
.gb-consent { margin:10px auto 0; max-width:520px; text-align:center; font-size:12px; line-height:1.5; color:var(--mut); }
.gb-consent a { color:var(--mut); }
.gb-dots i { width:7px; height:7px; border-radius:50%; background:#fff; display:inline-block; margin:0 3px; animation:gb-d 1s infinite; }
.gb-dots i:nth-child(2) { animation-delay:.15s; } .gb-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes gb-d { 50% { opacity:.3; transform:translateY(-2px); } }
.gb-loading { display:flex; justify-content:center; gap:7px; padding:60px 0; }
.gb-loading span { width:9px; height:9px; border-radius:50%; background:var(--or); animation:gb-d 1s infinite; }
.gb-loading span:nth-child(2) { animation-delay:.15s; } .gb-loading span:nth-child(3) { animation-delay:.3s; }
/* MK 10-31: "Keep going?" panel for the close button (only when Admin shows it) */
.gb-stay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(255,255,255,.86); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.gb-stay.is-on { opacity:1; pointer-events:auto; }
.gb-stay-card { width:100%; max-width:380px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px 14px; text-align:center; transform:translateY(8px); transition:transform .24s cubic-bezier(.22,.61,.36,1); }
.gb-stay.is-on .gb-stay-card { transform:none; }
.gb-stay-card b { display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.gb-stay-card p { margin:8px 0 16px; color:var(--mut); font-size:15px; line-height:1.45; }
.gb-stay-card .gb-btn { width:100%; }
.gb-stay-leave { margin-top:8px; border:0; background:transparent; color:var(--mut); font:600 14px Inter, system-ui, sans-serif; padding:8px; cursor:pointer; }
.gb-stay-leave:hover { color:var(--ink); text-decoration:underline; }
.gb-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
/* thank-you page */
.gb-body-done { height:auto !important; overflow:auto; }
.gb-done { position:static; text-align:center; padding:8px 28px 26px; }
.gb-done-ic { width:76px; height:76px; border-radius:50%; background:#e9f8ef; color:#16a34a; display:grid; place-items:center; margin:6px auto 16px; animation:gb-pop .4s; }
.gb-done-ic svg { width:38px; height:38px; }
.gb-next3 { text-align:left; margin:20px 0 0; border:1px solid var(--line); border-radius:10px; }
.gb-next3 div { display:flex; gap:12px; padding:13px 16px; border-top:1px solid var(--line); font-size:15px; color:var(--mut); line-height:1.45; }
.gb-next3 div:first-child { border-top:0; } .gb-next3 b { color:var(--ink); display:block; }
.gb-next3 em { font-style:normal; width:24px; height:24px; border-radius:50%; background:var(--tint); color:var(--or2); font-weight:800; font-size:13px; display:grid; place-items:center; flex:none; }
.gb-code { margin:18px 0 0; text-align:left; border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:#fcfbf9; }
.gb-code label { display:block; font-size:14.5px; color:var(--mut); margin-bottom:10px; } .gb-code label b { color:var(--ink); }
.gb-code-row { display:flex; gap:8px; }
.gb-code-row input { flex:1; min-width:0; height:48px; border:1.5px solid var(--line); border-radius:10px; padding:0 14px; font:600 18px Inter, system-ui, sans-serif; letter-spacing:4px; outline:0; }
.gb-code-row input:focus { border-color:var(--or); }
.gb-code .gb-err { text-align:left; margin:8px 0 0; }
.gb-done-acts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:20px; }
.gb-done-acts .gb-btn { flex:1 1 200px; max-width:280px; }
.gb-fine { font-size:12.5px; color:var(--mut); line-height:1.5; margin:14px 0 0; }
/* FULL PAGE layout */
.gb-full .gb-shell { padding:0; align-items:stretch; }
.gb-full .gb-win { max-width:none; height:100%; max-height:none; border-radius:0; animation:none; }
.gb-full .gb-win.is-wait { animation:gb-failsafe 0s linear 2.5s forwards; }
.gb-full .gb-head { display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 max(20px, calc(50% - 560px)); border-bottom:1px solid var(--line); flex:none; }
.gb-full .gb-x { top:12px; right:max(12px, calc(50% - 566px)); }   /* MK 11-01: the X on the full page too, lined up with the header */
/* MK 10-31 the brand over the photo (window layout, desktop): white logo left, the trust line right */
.gb-brand { display:none; }
.gb-wl .gb-brand { display:flex; position:fixed; top:0; left:0; right:0; z-index:1; height:72px; align-items:center; justify-content:space-between; padding:0 32px; pointer-events:none; }
.gb-brand .gb-logo { color:#fff; font-size:19px; }
.gb-brand .gb-logo i { background:#fff; color:var(--ink); }
.gb-brand .gb-logo i::after { border-color:transparent; }
.gb-brand .gb-head-trust { color:rgba(255,255,255,.9); } .gb-brand .gb-head-trust svg { color:#7ee2a8; }
.gb-wl .gb-shell { padding-top:clamp(76px, 11vh, 104px); }
.gb-full .gb-top { padding-top:24px; }
.gb-full .gb-prog { max-width:640px; }
.gb-full .gb-body { flex:1; min-height:0; height:auto !important; }
.gb-full .gb-step { bottom:0; max-height:none; padding:14px max(20px, calc(50% - 320px)) 40px; }
.gb-full .gb-done { padding-left:max(20px, calc(50% - 320px)); padding-right:max(20px, calc(50% - 320px)); }
.gb-full .gb-q { font-size:30px; max-width:600px; }
.gb-full .gb-foot { padding-left:max(20px, calc(50% - 320px)); padding-right:max(20px, calc(50% - 320px)); }
.gb-full .gb-foot-row { justify-content:space-between; }
.gb-full .gb-back[hidden] { display:inline-block; visibility:hidden; }
/* phones: both layouts are a full screen sheet */
@media (max-width:640px) {
  .gb-shell { padding:0; align-items:stretch; }
  .gb-win { max-width:none; height:100%; max-height:none; border-radius:0; }
  .gb-body { flex:1; min-height:0; height:auto !important; }
  .gb-step { bottom:0; max-height:none; padding:10px 18px 20px; }
  .gb-q, .gb-full .gb-q { font-size:23px; }
  .gb-top { padding:12px 16px 0; } .gb-full .gb-top { padding-top:14px; }
  .gb-full .gb-head { height:56px; } .gb-head-trust { display:none; }
  .gb-wl .gb-brand { display:none; } .gb-wl .gb-shell { padding-top:0; }
  .gb-wl .gb-head { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 16px; border-bottom:1px solid var(--line); flex:none; }
  .gb-row { font-size:16px; }
  .gb-foot, .gb-full .gb-foot { padding-left:16px; padding-right:16px; }
  .gb-next { flex:1; }
  .gb-icons.is-one { gap:8px; } .gb-wl .gb-icons { padding:0 36px; }
  .gb-icons.is-one b { max-width:none; font-size:14.5px; line-height:1.2; white-space:normal; text-align:left; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .gb-icons.is-one span { width:36px; height:36px; } .gb-icons.is-one span svg { width:18px; height:18px; }
  .gb-foot-row, .gb-full .gb-foot-row { gap:0; justify-content:flex-start; }
  .gb-back { max-width:120px; margin-right:10px; overflow:hidden; white-space:nowrap; transition:max-width .32s cubic-bezier(.22,.61,.36,1), margin .32s cubic-bezier(.22,.61,.36,1), padding .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
  .gb-back[hidden], .gb-full .gb-back[hidden] { display:inline-block; visibility:hidden; max-width:0; margin-right:0; padding-left:0; padding-right:0; opacity:0; }
  .gb-addr2 { grid-template-columns:minmax(0, 1fr) 120px; }
  .gb-done { padding:6px 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-win, .gb-done-ic, .gb-fade { animation:none; } .gb-body, .gb-prog i { transition:none; }
  .gb-step, .gb-step.is-out { transition:opacity .15s ease; transform:none !important; }
}

/* MK 10-31 optional "Add a budget" link (only trades where a budget can help) */
.gb-bo { margin-top:12px; }
.gb-bo-tog { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 4px; border:0; background:none; color:var(--or2); font:700 15px Inter, system-ui, sans-serif; cursor:pointer; border-radius:6px; }
.gb-bo-tog svg { width:16px; height:16px; transition:transform .2s; }
.gb-bo-tog small { color:var(--mut); font-weight:500; font-size:13.5px; }
.gb-bo-tog:hover span { text-decoration:underline; text-underline-offset:3px; }
.gb-bo.is-open .gb-bo-tog svg { transform:rotate(45deg); }
.gb-bo-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; animation:gbBoIn .2s ease; }
.gb-bo-chips[hidden] { display:none; }
.gb-bo-chip { height:40px; padding:0 14px; border:1.5px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font:500 15px Inter, system-ui, sans-serif; cursor:pointer; transition:background .15s, border-color .15s, transform .12s; }
.gb-bo-chip:hover { border-color:#d9cfc4; background:var(--soft); }
.gb-bo-chip:active { transform:scale(.98); }
.gb-bo-chip.is-on, .gb-bo-chip.is-on:hover { border-color:var(--or); background:var(--tint); color:var(--or2); font-weight:700; }
@keyframes gbBoIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .gb-bo-chips { animation:none; } }
/* MK 11-03 "or custom to enter it": "Other amount" - they type their own budget */
.gb-own { margin-top:12px; }
.gb-own[hidden] { display:none; }
.gb-own-f { gap:4px; }
.gb-own-cur { color:var(--mut); font:600 18px Inter, system-ui, sans-serif; }
.gb-own-msg { margin:8px 0 0; color:var(--bad); font-size:13.5px; font-weight:600; }
.gb-own-msg:empty { display:none; }
.gb-bo .gb-own { margin-top:10px; max-width:340px; }
.gb-bo .gb-own-f { height:48px; padding:0 14px; }
.gb-bo .gb-own-f input, .gb-bo .gb-own-cur { font-size:16px; }
@media (max-width:640px) { .gb-bo .gb-own { max-width:none; } }   /* phone: lines up with the details box */
/* MK 11-01 the X's popup: Continue (big) + Cancel request (quiet outline) */
.gb-stay-card .gb-stay-cancel { margin-top:8px; background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.gb-stay-card .gb-stay-cancel:hover { border-color:#cfc6bb; background:var(--soft); }
/* MK 11-01 "don't show the X on desktop, just very small and subtle on phones" */
@media (min-width:641px) { .gb-x { display:none; } }
@media (max-width:640px) { .gb-x, .gb-full .gb-x { width:30px; height:30px; top:8px; right:8px; color:#aaa29a; } .gb-x svg { width:16px; height:16px; } }