/* ═════════════════════════════════════════════════════════════════
   GET IT DONE (db52) — the Start page's three ways: Studio Tools · Digi Bot · Studio Team. Every class .gid-, under #gidRoot;
   colours are the tool-page tokens (--dl-*), so light and dark follow the studio. DigiLakshya only (index.php).
   ═════════════════════════════════════════════════════════════════ */
#dlHome.gid-on .dlh-head .dl-page-title{display:none}                 /* the chooser's question is the page's heading now */
#dlHome.gid-hide-tools .dlh-head,#dlHome.gid-hide-tools .dlh-search,#dlHome.gid-hide-tools #dlHomeBody{display:none}
#gidRoot{margin:0 0 22px}
.gid-host{container-type:inline-size}
.gid-host[hidden]{display:none}
.gid-host .gid-t{margin:0;text-align:center;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-.022em;font-weight:800;color:var(--dl-ink)}
.gid-host .gid-grad{background:linear-gradient(90deg,#38bdf8,#2563eb 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gid-host .gid-sub{margin:6px auto 18px;max-width:620px;text-align:center;font-size:clamp(14px,1.4vw,16px);color:var(--dl-mut)}
.gid-host .gid-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* compact tiles (owner 10-11: "these buttons looks too big, redesign better and smaller") — picture left, words right; each way keeps
   its tint (DIY slate, DAI blue, DBE violet) and the chosen one is outlined in it, with a tick */
.gid-host .gid-opt{--gt:#475569;--gs:rgba(100,116,139,.07);position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:96px;padding:8px 14px 8px 8px;border:1.5px solid var(--dl-line);border-radius:16px;background:var(--dl-panel);color:var(--dl-ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s,background .15s}
.gid-host .gid-opt-bot{--gt:#2563eb;--gs:rgba(37,99,235,.08)}
.gid-host .gid-opt-team{--gt:#7c3aed;--gs:rgba(124,58,237,.08)}
.gid-host .gid-opt:hover{border-color:color-mix(in srgb,var(--gt) 45%,var(--dl-line));transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.07)}
.gid-host .gid-opt:focus-visible{outline:2px solid var(--gt);outline-offset:3px}
.gid-host .gid-opt[aria-selected="true"]{border-color:var(--gt);background:color-mix(in srgb,var(--gt) 7%,var(--dl-panel));box-shadow:0 8px 22px color-mix(in srgb,var(--gt) 14%,transparent)}
.gid-host .gid-art{display:grid;place-items:center;flex:0 0 84px;width:84px;height:80px;border-radius:14px;background:transparent}   /* db80 (owner: "such big… reduce size") */
.gid-host .gid-art img{display:block;width:80px;height:80px;object-fit:contain}
.gid-host .gid-opt[aria-selected="true"] .gid-art.is-bot img{animation:gidBob 3.2s ease-in-out infinite}
@keyframes gidBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.gid-host .gid-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.gid-host .gid-code{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--gt)}
.gid-host .gid-code i{font-style:normal;font-weight:600;letter-spacing:0;color:var(--dl-mut)}
.gid-host .gid-name{font-size:17px;letter-spacing:-.01em;color:var(--dl-ink);margin:1px 0}
.gid-host .gid-desc{font-size:13.5px;line-height:1.35;color:var(--dl-mut)}
/* db78: the round arrow on every card (the owner's picture) */
.gid-host .gid-chev{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;margin-left:auto;border-radius:50%;background:color-mix(in srgb,var(--gt) 9%,var(--dl-panel));color:var(--gt);transition:transform .15s}
.gid-host .gid-opt:hover .gid-chev{transform:translateX(2px)}
.gid-host .gid-tick{position:absolute;top:8px;right:8px;display:none;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gt);color:#fff}
.gid-host .gid-opt[aria-selected="true"] .gid-tick{display:grid}
@media (prefers-reduced-motion:reduce){.gid-host .gid-opt[aria-selected="true"] .gid-art.is-bot img{animation:none}}
.gid-host .gid-strap{margin:16px 0 2px;text-align:center}
.gid-host .gid-strap-t{margin:0;font-size:clamp(16px,1.7vw,20px);font-weight:800;letter-spacing:-.015em;color:var(--dl-ink)}
.gid-host .gid-strap-t span{color:#2563eb}
.gid-host .gid-checks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;list-style:none;margin:8px 0 0;padding:0}
.gid-host .gid-checks li{display:inline-flex;align-items:center;gap:7px;padding:0 18px;font-size:13.5px;color:var(--dl-mut)}
.gid-host .gid-checks li+li{border-left:1px solid var(--dl-line)}
.gid-host .gid-checks svg{color:#22b07d;flex:0 0 auto}
.gid-host .gid-wait{color:var(--dl-mut);font-size:15px}
.gid-host .gid-panel{margin-top:16px}
.gid-host .gid-panel[hidden]{display:none}
/* the customer page's tabs, here (as on the top-bar panel): New brief · Jobs · Pricing · Wallet [balance] */
.gid-host .gid-tabs{display:flex;align-items:flex-end;gap:4px;margin:0 0 14px;border-bottom:1px solid var(--dl-line);overflow-x:auto;scrollbar-width:none}
.gid-host .gid-tabs::-webkit-scrollbar{display:none}
.gid-host .gid-tab{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:10px 14px 11px;border:0;border-bottom:2.5px solid transparent;margin-bottom:-1px;background:transparent;color:var(--dl-mut);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.gid-host .gid-tab:hover{color:var(--dl-ink)}
.gid-host .gid-tab[aria-selected="true"]{color:var(--dl-ink);border-bottom-color:var(--dl-acc)}
.gid-host .gid-tab:focus-visible{outline:2px solid var(--dl-acc);outline-offset:-2px;border-radius:8px}
.gid-host .gid-bal{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;align-self:center;margin:0 0 6px 8px;padding:6px 14px;border:1px solid var(--dl-acc-line,var(--dl-line));border-radius:999px;background:var(--dl-acc-soft);color:var(--dl-acc);font:inherit;font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer}
.gid-host .gid-bal:hover{border-color:var(--dl-acc)}
.gid-host .gid-bal[hidden]{display:none}
.gid-host .gid-bal.is-free{background:rgba(31,157,85,.1);border-color:rgba(31,157,85,.35);color:#178a48}
.gid-host .gid-full{display:inline-flex;align-items:center;gap:5px;margin:0 0 9px auto;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--dl-acc);text-decoration:none;white-space:nowrap}
.gid-host .gid-full[hidden]{display:none}
.gid-host .gid-vbrief[hidden],.gid-host .gid-vframe[hidden]{display:none}
.gid-host .gid-vframe{position:relative;height:max(620px,calc(100vh - 170px));border:1px solid var(--dl-line);border-radius:16px;overflow:hidden;background:var(--dl-panel)}
.gid-host .gid-vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.gid-host .gid-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:16px;align-items:start}
.gid-host .gid-card{border:1px solid var(--dl-line);border-radius:16px;background:var(--dl-panel);padding:22px}
.gid-host .gid-eyebrow{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dl-acc)}
.gid-host .gid-h{margin:0;font-size:clamp(24px,3.1vw,36px);line-height:1.12;letter-spacing:-.025em;font-weight:800;color:var(--dl-ink);text-wrap:balance}
.gid-host .gid-hl{color:var(--dl-acc)}
.gid-host .gid-lede{margin:8px 0 16px;color:var(--dl-mut);font-size:16px}
/* db78: three promises under the headline */
.gid-host .gid-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:0 0 18px;padding:0}
.gid-host .gid-perks li{display:flex;align-items:center;gap:11px;min-width:0}
.gid-host .gid-perks li+li{border-left:1px solid var(--dl-line);padding-left:12px}
.gid-host .gid-perk-ic{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--dl-acc-soft);color:var(--dl-acc)}
.gid-host .gid-perks li:first-child .gid-perk-ic{background:rgba(31,157,85,.1);color:#1f9d55}
.gid-host .gid-perks li:last-child .gid-perk-ic{background:rgba(124,58,237,.09);color:#7c3aed}
.gid-host .gid-perks b{display:block;font-size:14px;line-height:1.3;color:var(--dl-ink)}
.gid-host .gid-perks i{display:block;font-style:normal;font-size:12.5px;line-height:1.35;color:var(--dl-mut)}
.gid-host .gid-ta-wrap{position:relative}
.gid-host .gid-ta{display:block;width:100%;box-sizing:border-box;min-height:140px;padding:12px 14px 26px;border:1px solid var(--dl-line);border-radius:12px;background:var(--dl-panel);color:var(--dl-ink);font-family:inherit;font-size:15px;line-height:1.5;resize:vertical}
.gid-host .gid-ta:focus{outline:2px solid var(--dl-acc);outline-offset:1px;border-color:transparent}
.gid-host .gid-count{position:absolute;right:12px;bottom:8px;font-size:12px;color:var(--dl-mut);pointer-events:none}
.gid-host .gid-drop{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border:1.5px dashed var(--dl-line);border-radius:12px;cursor:pointer;color:var(--dl-ink)}
.gid-host .gid-drop:focus-visible,.gid-host .gid-drop.is-over{border-color:var(--dl-acc);background:var(--dl-acc-soft)}
.gid-host .gid-form.is-over .gid-ta{border-color:var(--dl-acc);background:var(--dl-acc-soft)}   /* db69: files dragged over the brief box */
.gid-host .gid-drop-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;height:36px;border-radius:50%;background:var(--dl-acc-soft);color:var(--dl-acc)}
.gid-host .gid-drop-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.gid-host .gid-drop-t span{font-size:12.5px;color:var(--dl-mut)}
.gid-host .gid-browse{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:8px 12px;border:1px solid var(--dl-line);border-radius:10px;font-size:14px;font-weight:600;color:var(--dl-acc);background:var(--dl-panel)}
.gid-host .gid-files{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gid-host .gid-files[hidden]{display:none}
.gid-host .gid-files li{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 6px 5px 10px;border-radius:999px;background:var(--dl-acc-soft);font-size:13px;color:var(--dl-ink);overflow:hidden;text-overflow:ellipsis}
.gid-host .gid-files i{font-style:normal;color:var(--dl-mut)}
.gid-host .gid-files button{border:0;background:transparent;color:var(--dl-mut);font-size:17px;line-height:1;cursor:pointer;padding:0 4px}
.gid-host .gid-try{margin:16px 0 8px;font-size:14px;font-weight:600;color:var(--dl-ink)}
.gid-host .gid-ex{display:flex;flex-wrap:wrap;gap:8px}
.gid-host .gid-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--dl-line);border-radius:10px;background:var(--dl-panel);color:var(--dl-ink);font:inherit;font-size:14px;cursor:pointer}
.gid-host .gid-chip:hover{border-color:var(--dl-acc)}
.gid-host .gid-chip svg{color:var(--dl-acc)}
.gid-host .gid-wants{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;border:0}
.gid-host .gid-wants legend{float:left;width:100%;border:0;padding:0;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--dl-ink)}
.gid-host .gid-wants input{accent-color:var(--dl-acc);margin:0}
.gid-host .gid-wants .gid-chip:has(input:checked){border-color:var(--dl-acc);background:var(--dl-acc-soft)}
.gid-host .gid-dl{display:flex;flex-direction:column;gap:6px;margin-top:14px;max-width:340px;font-size:14px;font-weight:600;color:var(--dl-ink)}
.gid-host .gid-dl i{font-style:normal;font-weight:400;color:var(--dl-mut)}
.gid-host .gid-dl input{padding:9px 12px;border:1px solid var(--dl-line);border-radius:10px;background:var(--dl-panel);color:var(--dl-ink);font:inherit;font-weight:400}
.gid-host .gid-msg{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:14px;background:var(--dl-acc-soft);color:var(--dl-ink)}
.gid-host .gid-msg[hidden]{display:none}
.gid-host .gid-msg.is-warn{background:rgba(220,120,0,.12)}
.gid-host .gid-undo{margin-left:6px;padding:0;border:0;background:transparent;color:var(--dl-acc);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.gid-host .gid-go-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:20px}
.gid-host .gid-go-row .gid-fine{margin:0}
.gid-host .gid-go{display:inline-flex;align-items:center;gap:10px;margin-top:0;padding:15px 30px;border:0;border-radius:999px;background:var(--dl-acc);color:var(--dl-acc-ink,#fff);font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
.gid-host .gid-go:disabled{opacity:.7;cursor:progress}
.gid-host .gid-go:focus-visible{outline:2px solid var(--dl-acc);outline-offset:3px}
.gid-host .gid-fine{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;font-size:13px;color:var(--dl-mut)}
.gid-host .gid-fine svg{flex:0 0 auto;margin-top:1px;color:#1f9d55}
.gid-host .gid-side{display:flex;flex-direction:column;gap:14px}
.gid-host .gid-next-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.gid-host .gid-next-h h4{margin:0;font-size:17px;color:var(--dl-ink)}
.gid-host .gid-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--dl-acc-soft);color:var(--dl-acc);font-size:12.5px;font-weight:600}
.gid-host .gid-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.gid-host .gid-steps li{position:relative;display:flex;gap:12px}
.gid-host .gid-steps li+li::before{content:"";position:absolute;left:16px;top:-15px;height:13px;border-left:1.5px dashed var(--dl-acc-line,var(--dl-line))}   /* db78: the dotted thread between steps */
.gid-host .gid-n{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--dl-acc-soft);color:var(--dl-acc);font-weight:700}
.gid-host .gid-steps b{display:block;font-size:15px;color:var(--dl-ink)}
.gid-host .gid-steps span{font-size:14px;color:var(--dl-mut)}
.gid-host .gid-switch{display:flex;gap:14px}
.gid-host .gid-switch-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;height:46px;border-radius:50%;background:var(--dl-acc-soft);color:var(--dl-acc)}
.gid-host .gid-switch b{font-size:16px;color:var(--dl-ink)}
.gid-host .gid-switch p{margin:4px 0 10px;font-size:14px;color:var(--dl-mut)}
.gid-host .gid-switch-go{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--dl-acc-line,var(--dl-line));border-radius:10px;background:var(--dl-acc-soft);color:var(--dl-acc);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.gid-host .gid-jobs{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:14px;font-weight:600;color:var(--dl-acc);text-decoration:none}
.gid-host .gid-jobs:hover{text-decoration:underline}
.gid-host .gid-control{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 18px;border:1px solid var(--dl-line);border-radius:14px;background:var(--dl-panel);color:var(--dl-ink);font-size:15px}
.gid-host .gid-control[hidden]{display:none}
.gid-host .gid-control svg{flex:0 0 auto;color:#1f9d55}
.gid-host .gid-control span{color:var(--dl-mut)}
.gid-host .gid-control b{color:var(--dl-ink)}
.gid-host .gid-done{text-align:left}
.gid-host .gid-done-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:10px;border-radius:50%;background:rgba(31,157,85,.12);color:#1f9d55}
.gid-host .gid-done-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.gid-host .gid-again{margin-top:18px;border:0;background:transparent;color:var(--dl-acc);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
/* 21i: the estimate on the sent card */
.gid-host .gid-est{margin:16px 0 18px;max-width:640px}
.gid-host .gid-est:empty{display:none}
/* 21v: a job on its way — the card in place of the form, the pill beside the tabs */
.gid-host form[hidden]{display:none}
.gid-host .gid-sending .gid-lede{margin:6px 0 12px}
.gid-host .gid-sendbar{display:block;height:6px;margin:0 0 12px;border-radius:3px;background:var(--dl-line);overflow:hidden}
.gid-host .gid-sendbar i{display:block;height:100%;width:0;border-radius:3px;background:var(--dl-acc);transition:width .25s}
.gid-host .gid-sendbar.is-wait i{width:30%;animation:gidSendWait 1.3s ease-in-out infinite alternate}
@keyframes gidSendWait{from{margin-left:0}to{margin-left:70%}}
.gid-host .gid-sendpill{flex:0 0 auto;align-self:center;margin:0 0 6px 8px;padding:6px 14px;border:1px solid var(--dl-acc-line,var(--dl-line));border-radius:999px;background:var(--dl-acc-soft);color:var(--dl-acc);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.gid-host .gid-sendpill.is-ok{background:rgba(31,157,85,.1);border-color:rgba(31,157,85,.35);color:#178a48}
.gid-host .gid-sendpill.is-bad{background:rgba(182,68,0,.1);border-color:rgba(182,68,0,.35);color:#b64400}
@media (prefers-reduced-motion:reduce){.gid-host .gid-sendbar.is-wait i{animation:none;width:100%;opacity:.45}}
.gid-host .gid-est-wait{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--dl-mut)}
.gid-host .gid-est-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--dl-acc);animation:gidEstPulse 1.4s ease-in-out infinite}
.gid-host .gid-est-wait.is-off .gid-est-dot{display:none}
@keyframes gidEstPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gid-host .gid-est-dot{animation:none}}
.gid-host .gid-est-h{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--dl-ink)}
.gid-host .gid-est-t{width:100%;border-collapse:collapse;font-size:14px;color:var(--dl-ink)}
.gid-host .gid-est-t td{padding:9px 0;border-bottom:1px solid var(--dl-line);vertical-align:top}
.gid-host .gid-est-t td.n{padding-left:16px;text-align:right;white-space:nowrap}
.gid-host .gid-est-what{display:block;margin-top:2px;font-size:13px;color:var(--dl-mut)}
.gid-host .gid-est-sum td{border-bottom:0;font-size:15px}
.gid-host .gid-est-fine{margin:8px 0 0;font-size:13px;color:var(--dl-mut)}
.gid-host .gid-est-fine a{color:var(--dl-acc)}
@container (max-width:860px){
  .gid-host .gid-main{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:760px){
  .gid-host .gid-opts{grid-template-columns:minmax(0,1fr)}
  .gid-host .gid-opt{min-height:0}
  .gid-host .gid-art{flex-basis:72px;width:72px;height:68px}
  .gid-host .gid-art img{width:68px;height:68px}
  .gid-host .gid-perks{grid-template-columns:minmax(0,1fr)}
  .gid-host .gid-perks li+li{border-left:0;padding-left:0}
}
@container (min-width:761px) and (max-width:1100px){
  .gid-host .gid-art{flex-basis:72px;width:72px;height:68px}
  .gid-host .gid-art img{width:68px;height:68px}
}
@container (max-width:600px){
  .gid-host .gid-tab{padding:9px 10px 10px;font-size:14px}
  .gid-host .gid-full{display:none}
  .gid-host .gid-vframe{height:max(560px,calc(100vh - 120px));border-radius:12px}
  .gid-host .gid-art{flex-basis:64px;width:64px;height:64px}
  .gid-host .gid-art img{width:64px;height:64px}
  .gid-host .gid-chev{display:none}
  .gid-host .gid-checks li{padding:0 10px;font-size:13px}
  .gid-host .gid-checks li+li{border-left:0}
  .gid-host .gid-card{padding:16px}
  .gid-host .gid-drop{flex-wrap:wrap}
  .gid-host .gid-browse{margin-left:48px}
}
/* the AI button's panel (db53): two ways side by side, and the page's colour tokens (a tool page defines them; the panel is outside one) */
.gid-host .gid-opts.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (max-width:520px){.gid-host .gid-opts.is-two{grid-template-columns:minmax(0,1fr)}}
.gid-host.is-panel{--dl-acc:#0066cc;--dl-acc-ink:#fff;--dl-acc-soft:rgba(0,113,227,.08);--dl-acc-line:rgba(0,113,227,.3);--dl-ink:#1d1d1f;--dl-mut:#636366;--dl-line:#d2d2d7;--dl-panel:#fff;--dl-raised:#f5f5f7;--dl-r:16px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;color:var(--dl-ink)}
html.dark .gid-host.is-panel{--dl-acc:#2997ff;--dl-acc-soft:rgba(41,151,255,.16);--dl-acc-line:rgba(41,151,255,.4);--dl-ink:#f5f5f7;--dl-mut:#a1a1a6;--dl-line:#3a3a3c;--dl-panel:#1c1c1e;--dl-raised:#2c2c2e}
.gid-host.is-panel .gid-vframe{height:max(560px,calc(100vh - 300px))}

/* ── 20h (owner 10-23, a picture — "AI Job Assignment CTA": "update this button part like this", then "Both": the top bar AND a big
   banner) — the Start page's banner: a dark glass track, the glowing blue "Assign a Job to AI" pill, Digi Bot with its laptop (cut from
   the owner's picture, digibot-jobs/img/digi-bot-laptop-*), a handwritten "I'll get it done!" and "Real work. / Done in minutes.".
   One link: index.php prints it only while the customer page is open; a click opens the job panel (dlCustBotOpen), or the page that
   opens it without script (?aibot=1). ── */
.dlcbb{display:block;margin:6px 0 26px;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.dlcbb:focus-visible{outline:none}.dlcbb:focus-visible .dlcbb-track{box-shadow:0 0 0 3px #8ea2ff,inset 0 1px 0 rgba(255,255,255,.07)}
.dlcbb-track{position:relative;display:flex;align-items:center;gap:clamp(10px,2.2vw,28px);min-height:150px;padding:20px clamp(18px,3.2vw,40px) 20px clamp(16px,2vw,22px);
  border-radius:999px;background:radial-gradient(120% 140% at 30% 50%,#17204a 0%,#0e1530 45%,#0a0f20 100%);border:1px solid rgba(140,160,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px rgba(10,16,48,.22);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif}
.dlcbb-pill{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:16px;height:78px;padding:0 34px 0 30px;border-radius:999px;color:#fff;
  font-weight:700;font-size:clamp(20px,2.3vw,30px);letter-spacing:-.02em;white-space:nowrap;
  background:linear-gradient(135deg,#6070ff 0%,#4c50f2 55%,#3d39d4 100%);
  box-shadow:0 0 0 1px rgba(150,165,255,.4),0 0 34px rgba(88,96,255,.62),0 10px 26px rgba(40,40,200,.4),inset 0 1px 0 rgba(255,255,255,.32);
  transition:box-shadow .2s ease,transform .2s ease;animation:dlcbbGlow 3.6s ease-in-out infinite}
.dlcbb-pill svg{flex:0 0 auto}.dlcbb-spark{width:30px;height:30px}.dlcbb-go{width:30px;height:30px;transition:transform .25s ease}
.dlcbb:hover .dlcbb-pill{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(170,182,255,.55),0 0 48px rgba(88,96,255,.8),0 14px 30px rgba(40,40,200,.45),inset 0 1px 0 rgba(255,255,255,.34)}
.dlcbb:hover .dlcbb-go{transform:translateX(5px)}
@keyframes dlcbbGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
.dlcbb-botw{position:relative;flex:0 0 auto;width:clamp(110px,13vw,150px);height:clamp(150px,18vw,208px);margin:-44px 0 -40px}
.dlcbb-bot{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(30,60,220,.35));animation:dlcbbBob 4.4s ease-in-out infinite}
@keyframes dlcbbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.dlcbb-ticks{position:absolute;right:-16px;top:36%;width:22px;height:30px;pointer-events:none}
.dlcbb-ticks i{position:absolute;display:block;width:4px;border-radius:3px;background:#5d86ff;animation:dlcbbTick 2.6s ease-in-out infinite}
.dlcbb-ticks i:nth-child(1){left:6px;top:0;height:12px;transform:rotate(38deg)}
.dlcbb-ticks i:nth-child(2){left:14px;top:13px;height:13px;transform:rotate(90deg);animation-delay:.12s}
@keyframes dlcbbTick{0%,100%{opacity:.35}40%{opacity:1}}
.dlcbb-copy{position:relative;flex:1 1 auto;min-width:0;padding-top:44px}
.dlcbb-say{position:absolute;left:-8px;top:-30px;display:flex;align-items:flex-end;gap:4px;color:#6b8cff;pointer-events:none;white-space:nowrap}
.dlcbb-say svg{width:44px;height:34px;flex:0 0 auto;overflow:visible;margin-bottom:-14px;transform:scaleX(-1) rotate(-14deg)}
.dlcbb-say path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dlcbb-say-b{display:inline-block;padding:6px 20px 9px;border:2px solid currentColor;border-radius:30px 36px 28px 34px;transform:rotate(-5deg);
  font:700 clamp(19px,2.2vw,28px)/1.1 "Bradley Hand","Segoe Print","Ink Free","Noteworthy","Chalkboard SE","Comic Sans MS",cursive;color:#a7b6ff}
.dlcbb-h{display:block;font-weight:800;font-size:clamp(24px,3.2vw,42px);line-height:1.04;letter-spacing:-.03em;color:#fff}
.dlcbb-h.b{background:linear-gradient(90deg,#3d8bff,#47ccff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.dlcbb-swoosh{display:block;width:clamp(120px,14vw,200px);height:12px;margin:-2px 0 0 auto;color:#36d0ea;max-width:62%}
@media (max-width:980px){
  .dlcbb-track{flex-wrap:wrap;border-radius:30px;justify-content:center;text-align:left;padding:26px 22px}
  .dlcbb-copy{flex:1 1 220px;padding-top:40px}
  .dlcbb-pill{order:3;flex:1 1 100%;justify-content:center;height:62px}
  .dlcbb-botw{margin:-10px 0 0}
}
@media (max-width:560px){.dlcbb-say{display:none}.dlcbb-copy{padding-top:0}.dlcbb-botw{width:96px;height:132px}.dlcbb-pill{gap:10px;padding:0 20px}.dlcbb-spark,.dlcbb-go{width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){.dlcbb-pill,.dlcbb-bot,.dlcbb-ticks i{animation:none}.dlcbb-go,.dlcbb-pill{transition:none}}

/* ── 20h (owner 10-23, a picture: "this design like this?") — the three ways as the owner drew them: big pastel cards, two badges
   (DIY · Do it yourself / AI · Done by AI / Experts · Done by experts), the name, one line, a round arrow, the picture large on the
   right; the heading left-aligned, "Get It Done" in blue. Tints: Studio Tools blue, Digi Bot violet, Studio Team green. The chosen card
   keeps its outline and tick (it still switches the panel below). ── */
.gid-host .gid-t{text-align:left;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;color:#0b1533}
html.dark .gid-host .gid-t{color:var(--dl-ink)}
.gid-host .gid-grad{background:linear-gradient(90deg,#1f6bff,#2f8bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.gid-host .gid-sub{margin:6px 0 18px;max-width:none;text-align:left;font-size:clamp(15px,1.5vw,18px);color:#4b5470}
html.dark .gid-host .gid-sub{color:var(--dl-mut)}
.gid-host .gid-opts{gap:14px}
.gid-host .gid-opt{--gt:#2f74f6;--gbg:linear-gradient(135deg,#eef4ff 0%,#e4ecff 100%);align-items:stretch;gap:0;min-height:208px;padding:22px 0 22px 24px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--gt) 14%,transparent);border-radius:20px;background:var(--gbg)}
.gid-host .gid-opt-bot{--gt:#8b5cf6;--gbg:linear-gradient(135deg,#f4efff 0%,#ebe3ff 100%)}
.gid-host .gid-opt-team{--gt:#14a372;--gbg:linear-gradient(135deg,#ebf8f2 0%,#dcf3e8 100%)}
.gid-host .gid-opt:hover{border-color:color-mix(in srgb,var(--gt) 40%,transparent);transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb,var(--gt) 16%,transparent)}
.gid-host .gid-opt[aria-selected="true"]{border:2px solid var(--gt);padding:21px 0 21px 23px;background:var(--gbg);box-shadow:0 14px 30px color-mix(in srgb,var(--gt) 18%,transparent)}
.gid-host .gid-txt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;flex:1 1 56%;min-width:0;max-width:60%}
.gid-host .gid-badges{display:inline-flex;align-items:center;gap:0;margin-bottom:14px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gt) 10%,transparent)}
.gid-host .gid-code{display:inline-block;padding:5px 13px;border-radius:999px;background:var(--gt);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.01em}
.gid-host .gid-lab{padding:5px 13px 5px 10px;font-size:13.5px;font-weight:600;color:#1f2a44;white-space:nowrap}
.gid-host .gid-name{font-size:clamp(20px,2vw,27px);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:#0b1533;margin:0 0 8px}
.gid-host .gid-desc{font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.45;color:#3d4763}
.gid-host .gid-chev{width:46px;height:46px;flex:0 0 auto;margin:auto 0 0;padding:0;border-radius:50%;background:color-mix(in srgb,var(--gt) 13%,#fff);color:var(--gt);transform:none}
.gid-host .gid-opt:hover .gid-chev{transform:translateX(3px)}
.gid-host .gid-art{position:relative;flex:1 1 44%;min-width:0;width:auto;height:auto;display:flex;align-items:center;justify-content:center;margin:-10px -6px -14px 0;border-radius:0}
.gid-host .gid-art img{width:100%;max-width:200px;height:auto;max-height:190px;object-fit:contain;filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--gt) 22%,transparent))}
.gid-host .gid-art.is-bot img{max-height:200px}
.gid-host .gid-tick{top:12px;right:12px;width:22px;height:22px;z-index:2}
html.dark .gid-host .gid-opt{--gbg:color-mix(in srgb,var(--gt) 16%,#1c1c1e)}
html.dark .gid-host .gid-name{color:#f5f5f7}html.dark .gid-host .gid-desc{color:#c7c7cc}html.dark .gid-host .gid-lab{color:#e5e5ea}
html.dark .gid-host .gid-badges{background:rgba(255,255,255,.08)}html.dark .gid-host .gid-chev{background:color-mix(in srgb,var(--gt) 26%,#1c1c1e)}
@container (max-width:1100px){
  .gid-host .gid-opt{min-height:190px;padding-left:18px}
  .gid-host .gid-opt[aria-selected="true"]{padding-left:17px}
  .gid-host .gid-badges{margin-bottom:10px}.gid-host .gid-code,.gid-host .gid-lab{font-size:12px;padding-top:4px;padding-bottom:4px}
  .gid-host .gid-art img{max-height:150px}
}
@container (max-width:860px){
  .gid-host .gid-opts{grid-template-columns:minmax(0,1fr)}
  .gid-host .gid-opt{min-height:0;padding:18px 0 18px 20px}
  .gid-host .gid-opt[aria-selected="true"]{padding:17px 0 17px 19px}
  .gid-host .gid-txt{max-width:64%}
  .gid-host .gid-chev{display:grid;margin-top:14px}
  .gid-host .gid-art img{max-height:140px}
}
@container (max-width:420px){
  .gid-host .gid-lab{display:none}.gid-host .gid-txt{max-width:66%}.gid-host .gid-art img{max-height:110px}
}

/* ── 20j (owner 10-23, a screenshot: "these looks very big. make it slimmer") — the banner ~96px tall (was 150+) and the cards ~130px
   (were 208): smaller pill, robot, words and art; the banner's balloon sits at the end of the line, the swoosh under "Done in minutes." ── */
.dlcbb{margin:2px 0 18px}
.dlcbb-track{min-height:0;height:92px;padding:0 clamp(16px,2.4vw,28px) 0 14px;gap:clamp(8px,1.4vw,18px)}
.dlcbb-pill{height:52px;padding:0 22px 0 18px;gap:10px;font-size:clamp(15px,1.45vw,19px)}
.dlcbb-spark,.dlcbb-go{width:20px;height:20px}
.dlcbb:hover .dlcbb-go{transform:translateX(3px)}
.dlcbb-botw{width:84px;height:116px;margin:-22px 0 -14px}
.dlcbb-ticks{right:-12px;top:34%;transform:scale(.7)}
.dlcbb-copy{flex:0 1 auto;display:flex;align-items:center;gap:clamp(10px,2vw,26px);padding-top:0}
.dlcbb-lines{display:inline-flex;flex-direction:column}
.dlcbb-h{font-size:clamp(17px,1.9vw,25px);line-height:1.08}
.dlcbb-swoosh{width:100%;max-width:none;height:7px;margin:1px 0 0}
.dlcbb-say{position:static;align-items:center;gap:2px}
.dlcbb-say svg{width:28px;height:22px;margin:0;transform:rotate(8deg)}
.dlcbb-say-b{padding:4px 13px 6px;font-size:clamp(14px,1.4vw,18px);border-width:1.6px}
@media (max-width:1180px){.dlcbb-say{display:none}}
@media (max-width:980px){
  .dlcbb-track{height:auto;padding:16px 18px;border-radius:24px;flex-wrap:wrap}
  .dlcbb-pill{order:3;flex:1 1 100%;height:46px;justify-content:center}
  .dlcbb-botw{width:66px;height:92px;margin:-6px 0 0}
}
.gid-host .gid-sub{margin-bottom:12px}
.gid-host .gid-opts{gap:12px}
.gid-host .gid-opt{min-height:132px;padding:14px 0 14px 16px;border-radius:16px}
.gid-host .gid-opt[aria-selected="true"]{padding:13px 0 13px 15px}
.gid-host .gid-badges{margin-bottom:8px}
.gid-host .gid-code,.gid-host .gid-lab{font-size:11.5px;padding-top:3px;padding-bottom:3px}
.gid-host .gid-code{padding-left:10px;padding-right:10px}
.gid-host .gid-name{font-size:clamp(16px,1.5vw,20px);margin-bottom:4px}
.gid-host .gid-desc{font-size:clamp(12.5px,1vw,13.5px);line-height:1.4}
.gid-host .gid-chev{width:30px;height:30px;margin-top:10px}
.gid-host .gid-chev svg{width:15px;height:15px}
.gid-host .gid-art{margin:-8px -4px -10px 0}
.gid-host .gid-art img{max-width:130px;max-height:112px}
.gid-host .gid-art.is-bot img{max-height:118px}
.gid-host .gid-tick{top:9px;right:9px;width:19px;height:19px}
@container (max-width:1100px){.gid-host .gid-opt{min-height:124px}.gid-host .gid-art img{max-height:96px}}
@container (max-width:860px){.gid-host .gid-opt{min-height:0}.gid-host .gid-art img{max-height:92px}}
.gid-host .gid-opt{min-height:0;padding:12px 0 12px 16px}
.gid-host .gid-opt[aria-selected="true"]{padding:11px 0 11px 15px}
.gid-host .gid-badges{margin-bottom:6px}
.gid-host .gid-name{margin-bottom:2px}
.gid-host .gid-chev{width:28px;height:28px;margin-top:6px}

/* ── 20k (owner 10-23, a picture: "might be better design approach here?") — glass cards: each a dark panel tinted in its own colour
   (light: its pastel) with a thin border in that colour, a soft sweep of light inside, sparkle ticks by the picture, a round arrow in
   the colour; the chosen card glows and its arrow fills. "to" lighter in the heading. Sizes stay 20j's (slim). ── */
.gid-host .gid-to{font-weight:600;opacity:.85}
.gid-host .gid-opt{position:relative;isolation:isolate;border:1px solid color-mix(in srgb,var(--gt) 34%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gt) 9%,#fff) 0%,color-mix(in srgb,var(--gt) 4%,#fff) 100%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 16px rgba(15,23,42,.05)}
.gid-host .gid-opt::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 125%,color-mix(in srgb,var(--gt) 22%,transparent) 0%,transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='none'%3E%3Cpath d='M0 140 C120 128 230 100 400 30' fill='none' stroke='white' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;opacity:.9}
.gid-host .gid-opt:hover{border-color:color-mix(in srgb,var(--gt) 60%,transparent)}
.gid-host .gid-opt[aria-selected="true"]{border:1.5px solid var(--gt);box-shadow:0 0 0 1px color-mix(in srgb,var(--gt) 30%,transparent),0 0 26px color-mix(in srgb,var(--gt) 30%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gt) 13%,#fff) 0%,color-mix(in srgb,var(--gt) 6%,#fff) 100%)}
.gid-host .gid-opt[aria-selected="true"]{padding:11.5px 0 11.5px 15.5px}
.gid-host .gid-chev{border:1px solid color-mix(in srgb,var(--gt) 40%,transparent);background:color-mix(in srgb,var(--gt) 12%,#fff)}
.gid-host .gid-opt[aria-selected="true"] .gid-chev{background:var(--gt);border-color:var(--gt);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--gt) 50%,transparent)}
.gid-host .gid-tick{box-shadow:0 0 12px color-mix(in srgb,var(--gt) 55%,transparent)}
.gid-host .gid-spk{position:absolute;left:4%;top:16%;width:14px;height:16px;pointer-events:none;transform:scaleX(-1)}
.gid-host .gid-spk::before,.gid-host .gid-spk::after{content:"";position:absolute;width:3px;border-radius:3px;background:var(--gt)}
.gid-host .gid-spk::before{left:2px;top:0;height:9px;transform:rotate(-28deg)}
.gid-host .gid-spk::after{left:9px;top:8px;height:8px;transform:rotate(62deg)}
.gid-host .gid-art img{filter:drop-shadow(0 10px 16px color-mix(in srgb,var(--gt) 30%,transparent))}
html.dark .gid-host .gid-opt{border-color:color-mix(in srgb,var(--gt) 42%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gt) 20%,#0c1222) 0%,color-mix(in srgb,var(--gt) 7%,#0a0f1c) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html.dark .gid-host .gid-opt::after{background:radial-gradient(120% 90% at 85% 125%,color-mix(in srgb,var(--gt) 34%,transparent) 0%,transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='none'%3E%3Cpath d='M0 140 C120 128 230 100 400 30' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
html.dark .gid-host .gid-opt[aria-selected="true"]{border-color:var(--gt);background:linear-gradient(135deg,color-mix(in srgb,var(--gt) 28%,#0c1222) 0%,color-mix(in srgb,var(--gt) 10%,#0a0f1c) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gt) 40%,transparent),0 0 30px color-mix(in srgb,var(--gt) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.08)}
html.dark .gid-host .gid-badges{background:rgba(255,255,255,.07)}
html.dark .gid-host .gid-lab{color:#d5d9e6}
html.dark .gid-host .gid-desc{color:#b8bfd0}
html.dark .gid-host .gid-chev{background:color-mix(in srgb,var(--gt) 20%,#0d1222);border-color:color-mix(in srgb,var(--gt) 55%,transparent);color:color-mix(in srgb,var(--gt) 70%,#fff)}
html.dark .gid-host .gid-opt[aria-selected="true"] .gid-chev{background:var(--gt);color:#fff}
html.dark .gid-host .gid-t{color:#fff}

/* ── 20l (owner 10-23: "these 2 lines in button not looking good. remove. Also try better button gradient and style … like in reference
   from chatGPT") — closer to the reference: a soft HILL of the card's colour rising under the picture (a filled ellipse with a bright
   crest, not a hairline), a coloured border with a faint glow on every card (strong on the chosen one), badges lit from the top, and
   arrows as dark rings in the colour — the chosen card's filled with a glowing gradient. No sparkle ticks. ── */
.gid-host .gid-spk{display:none}
.gid-host .gid-opt::after{content:none}
.gid-host .gid-opt::before{content:"";position:absolute;z-index:-1;left:18%;right:-30%;top:58%;height:150%;border-radius:50%;pointer-events:none;
  border-top:1px solid color-mix(in srgb,var(--gt) 45%,rgba(255,255,255,.6));
  background:linear-gradient(180deg,color-mix(in srgb,var(--gt) 20%,transparent) 0%,color-mix(in srgb,var(--gt) 6%,transparent) 38%,transparent 70%)}
.gid-host .gid-opt{border:1.5px solid color-mix(in srgb,var(--gt) 42%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--gt) 10%,#fff) 0%,color-mix(in srgb,var(--gt) 3%,#fff) 60%,#fff 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gt) 8%,transparent),0 8px 22px color-mix(in srgb,var(--gt) 10%,transparent)}
.gid-host .gid-opt,.gid-host .gid-opt[aria-selected="true"]{padding:11.5px 0 11.5px 15.5px}
.gid-host .gid-opt:hover{border-color:color-mix(in srgb,var(--gt) 65%,transparent)}
.gid-host .gid-opt[aria-selected="true"]{border:1.5px solid var(--gt);
  background:linear-gradient(160deg,color-mix(in srgb,var(--gt) 15%,#fff) 0%,color-mix(in srgb,var(--gt) 5%,#fff) 60%,#fff 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gt) 25%,transparent),0 0 28px color-mix(in srgb,var(--gt) 32%,transparent)}
.gid-host .gid-code{background:linear-gradient(180deg,color-mix(in srgb,var(--gt) 78%,#fff) 0%,var(--gt) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px color-mix(in srgb,var(--gt) 35%,transparent)}
.gid-host .gid-chev{width:30px;height:30px;border:1.5px solid color-mix(in srgb,var(--gt) 55%,transparent);background:color-mix(in srgb,var(--gt) 8%,#fff);color:var(--gt);box-shadow:none}
.gid-host .gid-opt[aria-selected="true"] .gid-chev{border-color:transparent;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--gt) 70%,#fff) 0%,var(--gt) 55%,color-mix(in srgb,var(--gt) 80%,#000) 100%);box-shadow:0 0 0 3px color-mix(in srgb,var(--gt) 18%,transparent),0 0 16px color-mix(in srgb,var(--gt) 55%,transparent)}
html.dark .gid-host .gid-opt{border-color:color-mix(in srgb,var(--gt) 60%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--gt) 22%,#0b1226) 0%,color-mix(in srgb,var(--gt) 9%,#0a1020) 55%,#090e1b 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gt) 12%,transparent),0 0 20px color-mix(in srgb,var(--gt) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.06)}
html.dark .gid-host .gid-opt::before{border-top-color:color-mix(in srgb,var(--gt) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gt) 30%,transparent) 0%,color-mix(in srgb,var(--gt) 10%,transparent) 40%,transparent 72%)}
html.dark .gid-host .gid-opt[aria-selected="true"]{border-color:var(--gt);
  background:linear-gradient(160deg,color-mix(in srgb,var(--gt) 32%,#0b1226) 0%,color-mix(in srgb,var(--gt) 13%,#0a1020) 55%,#0a0f1d 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gt) 45%,transparent),0 0 34px color-mix(in srgb,var(--gt) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.08)}
html.dark .gid-host .gid-chev{background:color-mix(in srgb,var(--gt) 14%,#0b1022);border-color:color-mix(in srgb,var(--gt) 65%,transparent);color:color-mix(in srgb,var(--gt) 65%,#fff)}
html.dark .gid-host .gid-opt[aria-selected="true"] .gid-chev{color:#fff}

/* ── 20m (owner 10-24: "selected button in three seems not noticable much. might be we increase size of selected button and bring more
   in front?") — the chosen card lifts forward: 4 % larger, raised, a stronger glow and shadow, on top; the others step back a little
   (dimmer, less colour) and come back on hover or focus. ── */
.gid-host .gid-opts{padding:8px 0 4px;overflow:visible}
.gid-host .gid-opt{transition:transform .22s cubic-bezier(.2,.9,.3,1.2),opacity .2s,filter .2s,box-shadow .22s,border-color .15s}
.gid-host .gid-opts:has(.gid-opt[aria-selected="true"]) .gid-opt:not([aria-selected="true"]){opacity:.78;filter:saturate(.75)}
.gid-host .gid-opts .gid-opt:not([aria-selected="true"]):hover,.gid-host .gid-opts .gid-opt:not([aria-selected="true"]):focus-visible{opacity:1;filter:none}
.gid-host .gid-opt[aria-selected="true"]{z-index:2;transform:translateY(-4px) scale(1.04);border-width:2px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gt) 35%,transparent),0 0 34px color-mix(in srgb,var(--gt) 38%,transparent),0 18px 36px rgba(15,23,42,.16)}
.gid-host .gid-opt[aria-selected="true"]:hover{transform:translateY(-5px) scale(1.04)}
html.dark .gid-host .gid-opt[aria-selected="true"]{box-shadow:0 0 0 1px color-mix(in srgb,var(--gt) 55%,transparent),0 0 44px color-mix(in srgb,var(--gt) 50%,transparent),0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
@media (prefers-reduced-motion:reduce){.gid-host .gid-opt{transition:none}}
@container (max-width:860px){.gid-host .gid-opt[aria-selected="true"]{transform:translateY(-2px) scale(1.02)}}

/* ── 22c (owner 10-31: "user understand thing as first glance and try"): the sample-job reel, and the "Have it made for me" view inside a tool ── */
.gid-host .gid-reel{margin:0}
.gid-host .gid-reel video{display:block;width:100%;height:auto;aspect-ratio:8/5;border-radius:12px;background:#15171c;object-fit:cover}
.gid-host .gid-reel figcaption{margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--dl-mut)}
.gid-host .gid-reel figcaption b{color:var(--dl-ink);font-weight:600}
.gid-host .gid-reel-card{padding:12px}
.gid-host .gid-side .gid-reel-card{margin-bottom:12px}

.gid-made-sw{display:inline-flex;gap:4px;width:max-content;max-width:100%;margin-top:10px;padding:4px;border-radius:999px;background:#ececf0;font:600 14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.gid-made-sw[hidden]{display:none}
.gid-made-sw button{border:0;border-radius:999px;padding:9px 16px;background:none;color:#3a3a3f;font:inherit;cursor:pointer;white-space:nowrap}
.gid-made-sw button:hover{background:rgba(0,0,0,.05)}
.gid-made-sw button:focus-visible{outline:2px solid #ff3d7f;outline-offset:2px}
.gid-made-sw button[aria-pressed="true"]{background:#fff;color:#1d1d1f;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.gid-made-sw .is-hot{color:#b4235a}
.gid-made-sw small{margin-left:4px;font-size:12.5px;font-weight:500;color:inherit!important;opacity:.92}   /* !important: dark-tools.css greys every small */
.gid-made-sw .is-hot[aria-pressed="true"]{background:linear-gradient(135deg,#ff7a2f 0%,#ff3d7f 55%,#a855f7 100%);color:#fff;box-shadow:0 2px 10px rgba(255,80,70,.38)}
.gid-made-sw .is-hot[aria-pressed="true"] small{opacity:1}
html.dark .gid-made-sw{background:#2c2c2e}
html.dark .gid-made-sw button{color:#d1d1d6}
html.dark .gid-made-sw button:hover{background:rgba(255,255,255,.08)}
html.dark .gid-made-sw button[aria-pressed="true"]{background:#f5f5f7;color:#1d1d1f}
html.dark .gid-made-sw .is-hot{color:#ff9ab8}
html.dark .gid-made-sw .is-hot[aria-pressed="true"]{background:linear-gradient(135deg,#ff7a2f 0%,#ff3d7f 55%,#a855f7 100%);color:#fff}
html.dlcb-staff .gid-made-sw{display:none!important}
/* while the view is on, the tool's own body and its head's tools step aside: one job on screen */
.tool.gid-made-on #rzHead ~ *:not(.gid-made-host){display:none!important}
.tool.gid-made-on #rzHead .dl-page-actions,.tool.gid-made-on #rzHead .rz-mode-pill,.tool.gid-made-on #rzHead .rz-demo-pill,.tool.gid-made-on #rzHead .dz-demo{display:none!important}
.gid-made-host{margin-top:14px}
.tool:not(.gid-made-on) .gid-made-host{display:none}
.gid-host.is-starter:not(.is-sent) .gid-tabs{display:none}
.gid-host .gid-main.is-made{display:block}
.gid-host .gid-form.gid-made{display:grid;grid-template-columns:minmax(240px,32%) minmax(0,1fr);gap:20px;align-items:start;padding:18px}
.gid-host .gid-made-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px;min-width:0}
.gid-host .gid-made-t{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;font-weight:600;color:var(--dl-ink)}
.gid-host .gid-made-t b{display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--dl-acc-soft);color:var(--dl-acc);font-size:12px;font-weight:700}
.gid-host .gid-made-drop{margin-top:0;min-height:74px}
.gid-host .gid-made-link{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:9px 12px;border:1px solid var(--dl-line);border-radius:10px;background:var(--dl-panel);color:var(--dl-ink);font:inherit;font-size:13.5px}
.gid-host .gid-made-link:focus{outline:2px solid var(--dl-acc);outline-offset:1px;border-color:transparent}
.gid-host .gid-made-chips,.gid-host .gid-made-rest{display:flex;flex-wrap:wrap;gap:7px}
.gid-host .gid-made-rest[hidden]{display:none}
.gid-host .gid-made-chip{padding:8px 11px;border:1px solid var(--dl-line);border-radius:9px;background:var(--dl-panel);color:var(--dl-ink);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer}
.gid-host .gid-made-chip:hover{border-color:var(--dl-acc)}
.gid-host .gid-made-chip:focus-visible{outline:2px solid var(--dl-acc);outline-offset:1px}
.gid-host .gid-made-chip[aria-pressed="true"]{border-color:#ff3d7f;background:rgba(255,61,127,.1);box-shadow:inset 0 0 0 1px #ff3d7f;font-weight:600}
.gid-host .gid-made-more{display:block;margin:8px 0 0}
.gid-host .gid-made-more[hidden]{display:none}
.gid-host .gid-made-sum{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 18px;align-items:center;padding-top:12px;border-top:1px solid var(--dl-line)}
.gid-host .gid-made-sum .gid-made-t{margin:0;white-space:nowrap}
.gid-host .gid-made-num{display:flex;align-items:center;gap:12px;min-width:0}
.gid-host .gid-made-num>b{font-size:30px;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--dl-ink);font-variant-numeric:tabular-nums}
.gid-host .gid-made-num>span{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;line-height:1.3;color:var(--dl-mut)}
.gid-host .gid-made-cover{color:#1a7f37;font-weight:600}
html.dark .gid-host .gid-made-cover{color:#30d158}
.gid-host .gid-made-cover[hidden]{display:none}
.gid-host .gid-made-sum .gid-go{margin:0;background:linear-gradient(135deg,#ff7a2f 0%,#ff3d7f 55%,#a855f7 100%);border-color:transparent;color:#fff;white-space:nowrap}
.gid-host .gid-made-sum .gid-fine{grid-column:1/-1;margin:2px 0 0;text-align:right;font-size:12px;color:var(--dl-mut)}
.gid-host .gid-made-sum .gid-msg{grid-column:1/-1;margin-top:6px}
.gid-host.is-starter .gid-done{max-width:680px}   /* the sent card and its estimate: a table stretched across a whole tool is hard to read */
.gid-host.is-starter .gid-done .gid-go{background:linear-gradient(135deg,#ff7a2f 0%,#ff3d7f 55%,#a855f7 100%);border-color:transparent;color:#fff}
@container (max-width:860px){
  .gid-host .gid-form.gid-made{grid-template-columns:minmax(0,1fr)}
  .gid-host .gid-made-reel{max-width:460px}
}
@container (max-width:620px){
  .gid-host .gid-made-steps{grid-template-columns:minmax(0,1fr)}
  .gid-host .gid-made-sum{grid-template-columns:minmax(0,1fr)}
  .gid-host .gid-made-sum .gid-go{width:100%;justify-content:center}
  .gid-host .gid-made-sum .gid-fine{text-align:left}
}
@media (max-width:520px){.gid-made-sw{width:100%}.gid-made-sw button{flex:1 1 auto;padding:9px 8px;white-space:normal}.gid-made-sw small{display:block;margin:2px 0 0}}