/* Build Your Site With Claude: the walkthrough page (/build-your-site/).
   Everything is scoped to .jbb so none of it can leak into the rest of the theme.
   Spacing base 16: 8 / 12 / 16 / 24. Font: SF Pro through the system stack (her call, 2026-10-20). */
.jbb{--beige:#F3EBDD; --ink:#1F1F1F; --muted:#66605A; /* 5.2:1 on beige, 5.9:1 on card (AA) */ --field:#8F8577; /* control edges: 3.1:1 on beige (AA non-text) */ --accent-ink:#3C6B00; /* dark green for green text/icons: 6:1 */ --selbg:#ECE4D3; /* neutral selected fill */ --line:#DDD3C4; --card:#FBF8F2;
  --hover:rgba(31,31,31,.05); --sel:rgba(159,229,0,.28);
  --lime:#9FE500; --on-lime:#111111; --err:#A3260F;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(31,31,31,.05),0 6px 16px rgba(31,31,31,.07);
  --r-sm:8px;  
  --r-md:10px; 
  
  --sp-1:8px;  
  --sp-2:12px; 
  --sp-3:16px; 
  --sp-4:24px; 
  --px:12px;   
  color-scheme:light;}
.jbb{background:var(--beige); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; letter-spacing:-.005em}
.jbb .wrap{display:flex; flex-direction:column; max-width:720px; margin-inline:auto; padding-inline:16px; padding-block:0}
.jbb .top{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-block:var(--sp-2); font-size:12px; color:var(--muted)}
.jbb .top b{color:var(--ink); font-weight:600}
.jbb .bar{height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.jbb .bar i{display:block; height:100%; width:0; background:var(--ink); transition:width .45s cubic-bezier(.22,1,.36,1)}
.jbb .jbb-main{display:flex; justify-content:center; padding-block:var(--sp-4)}
.jbb .screen{width:100%; max-width:600px; display:flex; flex-direction:column; gap:var(--sp-3)}
.jbb .screen.in{animation:jbb-in .35s cubic-bezier(.22,1,.36,1)}
@keyframes jbb-in{from{opacity:.001; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.jbb .screen.in{animation:none}
.jbb .bar i{transition:none}}
.jbb .eyebrow{font-size:12px; font-weight:500; color:var(--muted); display:flex; gap:8px; align-items:center}
.jbb .eyebrow .n{font-family:var(--mono); color:var(--ink)}
.jbb h1{font-size:clamp(26px,4.4vw,34px); line-height:1.15; font-weight:700; letter-spacing:-.025em; margin:0; text-wrap:balance}
.jbb h2{font-size:clamp(21px,3.4vw,26px); line-height:1.2; font-weight:650; letter-spacing:-.02em; margin:0; text-wrap:balance}
.jbb p{margin:0; max-width:62ch}
.jbb .muted{color:var(--muted)}
.jbb .hint{font-size:12px; color:var(--muted)}
.jbb .hint kbd{font-family:var(--mono); font-size:11px; border:1px solid var(--line); border-radius:4px; padding:0 4px; background:var(--card)}
.jbb :focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.jbb .input{font:inherit; font-size:18px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px var(--px); width:100%; outline:none; box-shadow:inset 0 1px 1px rgba(31,31,31,.03)}
.jbb .input::placeholder{color:#B5AC9F}
.jbb .input:focus{border-color:var(--ink); box-shadow:0 0 0 3px var(--sel)}
.jbb .pills{display:flex; flex-direction:column; width:100%; max-width:320px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:4px; gap:0}
.jbb .pill{font:inherit; font-size:14px; display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:7px var(--px); border:0; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer; position:relative}
.jbb .pill + .pill::before{content:""; position:absolute; left:var(--px); right:var(--px); top:0; height:1px; background:var(--line); opacity:.6}
.jbb .pill:hover{background:var(--hover)}
.jbb .pill:hover::before,.jbb .pill:hover + .pill::before{opacity:0}
.jbb .pill .k{font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 4px; min-width:18px; text-align:center}
.jbb .pill .lbl{flex:1}
.jbb .pill .ck{width:14px; height:14px; display:grid; place-content:center; opacity:0}
.jbb .pill .ck::after{content:""; width:8px; height:4px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg) translate(1px,-1px)}
.jbb .pill[aria-pressed="true"]{background:var(--sel); font-weight:500}
.jbb .pill[aria-pressed="true"]::before,.jbb .pill[aria-pressed="true"] + .pill::before{opacity:0}
.jbb .pill[aria-pressed="true"] .ck{opacity:1}
.jbb .row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.jbb .btn{font:inherit; font-size:14px; font-weight:600; padding:8px 16px; border-radius:var(--r-sm); border:1px solid var(--ink); background:var(--ink); color:var(--beige); cursor:pointer}
.jbb .btn:hover{background:#000}
.jbb .btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.jbb .btn.ghost:hover{background:var(--hover)}
.jbb .nav{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--line)}
.jbb .you{display:flex; flex-direction:column; gap:4px; padding-left:var(--px); border-left:2px solid var(--lime)}
.jbb .lab,.jbb .you .lab{font-size:12px; font-weight:500; color:var(--muted)}
.jbb .prompt{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); overflow:hidden}
.jbb .prompt-h{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:6px 6px 6px var(--px); border-bottom:1px solid var(--line)}
.jbb .prompt-h span{font-size:12px; font-weight:500; color:var(--muted)}
.jbb .copy{font:inherit; font-size:13px; font-weight:500; padding:4px 10px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}
.jbb .copy:hover{background:var(--hover)}
.jbb .copy.done{background:var(--lime); border-color:var(--lime); color:var(--on-lime)}
.jbb .prompt pre{margin:0; padding:var(--px) var(--px) 14px; font-family:var(--mono); font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word}
.jbb .prompt pre mark{background:var(--sel); color:inherit; padding:0 2px; border-radius:3px}
.jbb .note{font-size:14px; color:var(--muted)}
.jbb .list{display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.jbb .list li{display:flex; gap:var(--sp-2); align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px}
.jbb .list li b{font-weight:600}
.jbb .list .d{font-family:var(--mono); font-size:12px; color:var(--muted); min-width:2ch}
.jbb .rule{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2)}
.jbb .rule > div{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:var(--sp-2) var(--px); display:flex; flex-direction:column; gap:var(--sp-1)}
.jbb .rule > div.c{background:var(--lime); border-color:var(--lime); color:var(--on-lime)}
.jbb .rule > div.c .lab{color:var(--on-lime); opacity:.65}
.jbb .rl{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:1.45}
@media (max-width:480px){.jbb .rule{grid-template-columns:1fr}
.jbb .input{font-size:17px}
.jbb .pills{max-width:none}}
.jbb .checks{display:flex; flex-direction:column; margin:0; padding:4px; list-style:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow)}
.jbb .checks li + li{border-top:1px solid var(--line)}
.jbb .checks label{display:flex; gap:10px; align-items:flex-start; cursor:pointer; line-height:1.45; font-size:14px; padding:8px; border-radius:6px}
.jbb .checks label:hover{background:var(--hover)}
.jbb .checks input{appearance:none; -webkit-appearance:none; flex:none; width:16px; height:16px; margin:2px 0 0; border:1px solid #B5AC9F; border-radius:4px; background:#fff; cursor:pointer; display:grid; place-content:center}
.jbb .checks input:checked{background:var(--ink); border-color:var(--ink)}
.jbb .checks input:checked::after{content:""; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px)}
.jbb .checks input:checked + span{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--muted)}
.jbb .checks a,.jbb .lnk{color:var(--ink); text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:2px}
.jbb .drop{border:1px dashed #B5AC9F; border-radius:var(--r-md); padding:var(--sp-4) var(--sp-3); display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; cursor:pointer; background:var(--card); font:inherit; font-size:14px; color:var(--ink); width:100%}
.jbb .drop:hover{background:#fff}
.jbb .drop.over{background:var(--sel); border-color:var(--ink)}
.jbb .drop small{color:var(--muted); font-size:12px}
.jbb .shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:var(--sp-2)}
.jbb .shot{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--card); box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0}
.jbb .shot img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border-bottom:1px solid var(--line)}
.jbb .shot .meta{padding:8px var(--px) 10px; display:flex; flex-direction:column; gap:6px; font-size:13px}
.jbb .shot .fn{font-family:var(--mono); font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jbb .shot textarea{font:inherit; font-size:13px; line-height:1.4; border:1px solid var(--line); border-radius:6px; background:#fff; resize:vertical; min-height:44px; padding:6px 8px; color:var(--ink)}
.jbb .shot textarea:focus{outline:none; border-color:var(--ink)}
.jbb .shot .x{align-self:flex-start; font:inherit; font-size:12px; background:none; border:0; padding:0; color:var(--muted); text-decoration:underline; cursor:pointer}
.jbb .part{display:inline-flex; align-self:flex-start; font-size:11px; font-weight:600; letter-spacing:.02em; background:var(--ink); color:var(--beige); border-radius:6px; padding:2px 8px}
.jbb .eform{display:flex; flex-direction:column; gap:var(--sp-1); padding-top:var(--sp-3); border-top:1px solid var(--line)}
.jbb .flab{font-size:12px; font-weight:500; color:var(--muted); margin-top:var(--sp-1)}
.jbb .err{color:var(--err); font-size:13px}
.jbb .proto{font-family:var(--mono); font-size:11px; color:var(--muted)}
.jbb .foot{padding-block:var(--sp-2); font-size:12px; color:var(--muted); display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; border-top:1px solid var(--line)}
.jbb .foot button{font:inherit; background:none; border:0; color:var(--muted); text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:0}
.jbb .foot button:hover{color:var(--ink)}
.jbb .cost{margin:0; padding:4px var(--px); list-style:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow)}
.jbb .cost li{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); padding:10px 0}
.jbb .cost li + li{border-top:1px solid var(--line)}
.jbb .cost .cl{display:flex; flex-direction:column; gap:2px; min-width:0; font-size:14px}
.jbb .cost .cl span{font-size:12px; color:var(--muted); line-height:1.4}
.jbb .cost .cv{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none; text-align:right; font-size:14px; font-variant-numeric:tabular-nums}
.jbb .cost .cv span{font-size:12px; color:var(--muted)}
.jbb .cost .tot{border-top:1px solid var(--ink)!important}
.jbb .cost .tot b{font-size:16px}
.jbb .sit{font-size:13px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px var(--px); color:var(--ink)}
.jbb .sit b{font-weight:600}
.jbb .fcards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4)}
@media (max-width:520px){.jbb .fcards{grid-template-columns:1fr}}
.jbb .fcard{font:inherit; color:var(--ink); text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2) var(--sp-3); background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s, background .15s}
.jbb .fcard:hover{border-color:#B5AC9F}
.jbb .fcard[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 3px var(--lime), var(--shadow)}
.jbb .fc-t{display:flex; align-items:center; gap:8px; padding-inline:4px}
.jbb .fc-name{font-size:16px; font-weight:650; letter-spacing:-.01em; flex:1}
.jbb .fc-d{font-size:13px; color:var(--muted); line-height:1.4; padding-inline:4px; margin-top:-6px; min-height:2.8em}
.jbb .fcard .k{font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 4px; min-width:18px; text-align:center}
.jbb .fcard .ck{width:18px; height:18px; border-radius:50%; border:1px solid var(--line); display:grid; place-content:center}
.jbb .fcard .ck::after{content:""; width:8px; height:4px; border-left:2px solid var(--on-lime); border-bottom:2px solid var(--on-lime); transform:rotate(-45deg) translate(1px,-1px); opacity:0}
.jbb .fcard[aria-pressed="true"] .ck{background:var(--lime); border-color:var(--lime)}
.jbb .fcard[aria-pressed="true"] .ck::after{opacity:1}
.jbb .pv{display:flex; flex-direction:column; gap:8px; aspect-ratio:4/3; width:100%; border-radius:6px; padding:14px 16px; overflow:hidden; position:relative}
.jbb .pv-nav{display:flex; gap:5px; justify-content:flex-end}
.jbb .pv-nav i{display:block; width:14px; height:3px; border-radius:2px; background:currentColor; opacity:.35}
.jbb .pv-h{display:block; line-height:1.05; margin-top:8px; margin-bottom:4px}
.jbb .pv-l{display:block; height:4px; width:80%; border-radius:2px; background:currentColor; opacity:.22}
.jbb .pv-l.s{width:55%}
.jbb .pv-row{display:flex; align-items:center; justify-content:space-between; margin-top:auto}
.jbb .pv-b{font-size:9px; padding:4px 8px; line-height:1}
.jbb .pv-shape{display:block}
.jbb .pv-soft{background:#F8E49A; color:#5A4210}
.jbb .pv-soft .pv-h{font-family:ui-rounded,"SF Pro Rounded","Nunito","Quicksand",system-ui,sans-serif; font-size:17px; font-weight:600}
.jbb .pv-soft .pv-l{border-radius:4px}
.jbb .pv-soft .pv-b{background:#5A4210; color:#F8E49A; border-radius:999px; font-family:ui-rounded,system-ui,sans-serif; font-weight:600}
.jbb .pv-soft .pv-shape{width:34px; height:34px; border-radius:50%; background:#F2C94C; box-shadow:-14px 6px 0 -4px #F4B9A0}
.jbb .pv-bold{background:#111; color:#fff}
.jbb .pv-bold .pv-h{font-family:var(--sans); font-size:21px; font-weight:900; letter-spacing:-.04em; color:#fff}
.jbb .pv-bold .pv-nav i{opacity:.6}
.jbb .pv-bold .pv-l{opacity:.4}
.jbb .pv-bold .pv-b{background:var(--lime); color:#111; font-weight:800; border-radius:0; text-transform:uppercase; letter-spacing:.02em}
.jbb .pv-bold .pv-shape{width:30px; height:30px; background:#FF5A1F; transform:rotate(12deg)}
.jbb .pv-simple{background:#fff; color:#222; border:1px solid #ECECEC}
.jbb .pv-simple .pv-h{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:-.01em}
.jbb .pv-simple .pv-l{height:3px; opacity:.12}
.jbb .pv-simple .pv-b{border:1px solid #222; color:#222; border-radius:3px; font-weight:500}
.jbb .pv-simple .pv-shape{width:40px; height:1px; background:#222; opacity:.3}
.jbb .pv-elegant{background:#1F3B33; color:#EDE3CF}
.jbb .pv-elegant .pv-h{font-family:ui-serif,"New York",Georgia,"Times New Roman",serif; font-size:19px; font-style:italic; font-weight:400; letter-spacing:.01em}
.jbb .pv-elegant .pv-l{height:2px; opacity:.3}
.jbb .pv-elegant .pv-b{border:1px solid #C9A96A; color:#C9A96A; border-radius:0; font-family:ui-serif,Georgia,serif; letter-spacing:.12em; text-transform:uppercase; font-size:8px}
.jbb .pv-elegant .pv-shape{width:26px; height:26px; border:1px solid #C9A96A; transform:rotate(45deg)}
.jbb .addpage{display:flex; flex-direction:column; gap:var(--sp-1); max-width:320px}
.jbb .addpage .flab{margin-top:0}
.jbb .addrow{display:flex; gap:var(--sp-1)}
.jbb .addin{font:inherit; font-size:14px; flex:1; min-width:0; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px var(--px); outline:none}
.jbb .addin::placeholder{color:#B5AC9F}
.jbb .addin:focus{border-color:var(--ink); box-shadow:0 0 0 3px var(--sel)}
.jbb .addrow .btn{padding:7px 12px; font-size:13px; white-space:nowrap}
@media (max-width:480px){.jbb .addpage{max-width:none}}
.jbb .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.jbb .top{justify-content:flex-end}
/* theme.json makes every link the site's blue accent; inside the walkthrough links match the page instead */
.jbb a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:3px}
.jbb a:hover{text-decoration-color:var(--ink)}
.jbb .cnotes{display:flex; flex-direction:column; gap:var(--sp-2); font-size:15px}
.jbb .cnotes b{font-weight:600}
/* domain check under the business name */
.jbb .dom{display:flex; flex-direction:column; gap:var(--sp-1); min-height:20px}
.jbb .dom-list{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:4px}
.jbb .dom-row{display:flex; align-items:center; gap:var(--sp-2); padding:8px var(--px); border-radius:6px; font-size:14px}
.jbb .dom-row + .dom-row{border-top:1px solid var(--line)}
.jbb .dom-row.on{background:var(--sel)}
.jbb .dom-n{flex:1; min-width:0; font-family:var(--mono); font-size:13px; overflow-wrap:anywhere}
.jbb .dom-s{font-size:12px; color:var(--muted); white-space:nowrap}
.jbb .dom-s.available{color:#3C6B00}
.jbb .dom-use{font:inherit; font-size:12px; font-weight:500; padding:4px 10px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; white-space:nowrap}
.jbb .dom-use:hover{background:var(--hover)}
.jbb .dom-use[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--beige)}
.jbb .dom-row a{font-size:12px; white-space:nowrap}
.jbb .dom-st{font-size:12px; color:var(--muted)}
@media (max-width:420px){.jbb .dom-row{flex-wrap:wrap}.jbb .dom-n{flex-basis:100%}}

/* ---------------------------------------------------------------- Contrast + readability pass (2026-10-20)
   Lime is an accent only now: check icons, thin rings and rules. It never sits
   behind text, because lime on these light surfaces is 1.5:1. Text is charcoal
   or --muted (AA). Anything people click or type into has an edge of at least
   3:1 (--field). Decorative dividers stay on --line. */
.jbb .input,.jbb .addin,.jbb .shot textarea{border-color:var(--field)}
.jbb .input::placeholder,.jbb .addin::placeholder{color:var(--muted); opacity:1}
.jbb .input:focus,.jbb .addin:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(159,229,0,.45)}
.jbb .btn.ghost{border-color:var(--field)}
.jbb .copy,.jbb .dom-use{border-color:var(--field)}
.jbb .copy.done{background:var(--ink); border-color:var(--ink); color:var(--beige)}
.jbb .checks input{border-color:var(--field)}
.jbb .drop{border-color:var(--field)}
.jbb .drop.over{background:var(--selbg)}
.jbb .hint,.jbb .note,.jbb .dom-st,.jbb .foot,.jbb .foot button,.jbb .eyebrow,.jbb .lab,.jbb .flab,.jbb .top,.jbb .fc-d,.jbb .cost .cl span,.jbb .cost .cv span,.jbb .shot .fn,.jbb .prompt-h span{color:var(--muted)}

/* selected states: neutral fill + dark check, lime as a thin detail */
.jbb .pill[aria-pressed="true"]{background:var(--selbg)}
.jbb .pill[aria-pressed="true"] .ck{width:16px; height:16px; border-radius:50%; background:var(--lime)}
.jbb .pill[aria-pressed="true"] .ck::after{border-color:var(--ink); width:7px; height:3.5px}
.jbb .dom-row.on{background:var(--selbg); box-shadow:inset 2px 0 0 var(--lime)}
.jbb .fcard[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 2px var(--lime), var(--shadow)}
.jbb .fcard[aria-pressed="true"] .ck::after{border-color:var(--ink)}
.jbb .dom-s.available{color:var(--accent-ink)}

/* filled-in answers inside prompts: underline accent instead of a lime block */
.jbb .prompt pre mark{background:transparent; color:var(--ink); font-weight:600; padding:0; border-radius:0; box-shadow:inset 0 -2px 0 var(--lime)}

/* "What you'll need to do": two matching cards, charcoal text, check icons */
.jbb .rule{align-items:stretch}
.jbb .rule > div,.jbb .rule > div.c{background:var(--card); border:1px solid var(--line); color:var(--ink); padding:var(--sp-3); gap:var(--sp-2)}
.jbb .rule > div .lab,.jbb .rule > div.c .lab{font-size:14px; font-weight:600; color:var(--ink); opacity:1; letter-spacing:-.005em}
.jbb .rule > div.c{box-shadow:inset 0 2px 0 var(--lime), var(--shadow)}
.jbb .rl{list-style:none; padding-left:0; gap:var(--sp-1); font-size:14px; color:var(--ink)}
.jbb .rl li{position:relative; padding-left:24px}
.jbb .rl li::before{content:""; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%; background:var(--selbg); border:1px solid var(--field)}
.jbb .rule > div.c .rl li::before{background:var(--lime); border-color:var(--lime)}
.jbb .rl li::after{content:""; position:absolute; left:5px; top:7px; width:6px; height:3px; border-left:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:rotate(-45deg)}

/* checklist: checked box is dark with a white tick (already), unchecked edge 3:1 */
.jbb .checks input:checked + span{color:var(--muted); text-decoration-color:var(--muted)}

/* step "You do this" + sitting note keep the thin lime rule as the accent */
.jbb .sit{border-color:var(--line); box-shadow:inset 2px 0 0 var(--lime)}

/* links: charcoal text, lime underline is decoration; hover darkens it */
.jbb a{color:var(--ink)}

/* No grey text (her call, 2026-10-20): every label, hint and note is charcoal.
   Placeholders are the one exception, so an empty box never looks filled in. */
.jbb{--muted:var(--ink)}
.jbb .input::placeholder,.jbb .addin::placeholder,.jbb .shot textarea::placeholder{color:#66605A}
.jbb .notes{display:flex; flex-direction:column; gap:var(--sp-1); font-size:14px}
.jbb .notes b{font-weight:600}
.jbb code{font-family:var(--mono); font-size:.9em; background:var(--selbg); border:1px solid var(--line); border-radius:4px; padding:0 4px}
.jbb .checks.num{counter-reset:jbbn}
.jbb .checks.num li{counter-increment:jbbn}
.jbb .checks.num label > span::before{content:counter(jbbn) ". "; font-weight:600}
.jbb .you .lab{font-weight:600}
/* inline things to copy: the text plus its own Copy button */
.jbb .cpw{display:inline-flex; align-items:center; gap:6px; vertical-align:middle; max-width:100%; flex-wrap:wrap}
.jbb .cpt{font-family:var(--mono); font-size:13px; background:var(--selbg); border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--ink); overflow-wrap:anywhere}
.jbb .cpb{font:inherit; font-size:12px; font-weight:500; padding:2px 8px; border-radius:6px; border:1px solid var(--field); background:var(--card); color:var(--ink); cursor:pointer; line-height:1.4}
.jbb .cpb:hover{background:var(--hover)}
.jbb .cpb.done{background:var(--ink); border-color:var(--ink); color:var(--beige)}
/* first page: the tools in the order you'll use them */
.jbb .tools{list-style:none; margin:0; padding:var(--sp-2) 0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.jbb .tools li:not(.arr){display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; width:96px}
.jbb .tools img{width:28px; height:28px; display:block}
.jbb .tools .tn{font-size:13px; font-weight:600; line-height:1.2}
.jbb .tools .td{font-size:12px; line-height:1.3}
.jbb .tools .arr{align-self:flex-start; margin-top:4px; font-size:16px}
@media (max-width:560px){.jbb .tools{flex-direction:column; align-items:stretch; gap:var(--sp-1)} .jbb .tools li:not(.arr){flex-direction:row; text-align:left; width:auto; gap:var(--sp-2)} .jbb .tools .tn{min-width:118px} .jbb .tools .arr{display:none} .jbb .tools img{width:22px; height:22px}}
.jbb .tools{flex-wrap:nowrap; gap:4px; justify-content:space-between}
.jbb .tools li:not(.arr){width:auto; flex:1 1 0; min-width:0}
.jbb .tools .arr{flex:none; font-size:14px; margin-top:6px}
@media (max-width:560px){.jbb .tools{flex-wrap:wrap}}

/* No divider lines (her call, 2026-10-20). Spacing separates things instead.
   Card outlines stay; those were asked for. The progress bar keeps its black
   fill but loses the grey track. */
.jbb .bar{background:transparent}
.jbb .tools{border-top:0; border-bottom:0; padding:0}
.jbb .nav{border-top:0; padding-top:var(--sp-1)}
.jbb .foot{border-top:0}
.jbb .eform{border-top:0; padding-top:0}
.jbb .list{border-top:0}
.jbb .list li{border-bottom:0; padding:4px 0}
.jbb .pill + .pill::before{display:none}
.jbb .checks li + li{border-top:0}
.jbb .cost li + li{border-top:0}
.jbb .cost li{padding:8px 0}
.jbb .cost .tot{border-top:0!important; margin-top:4px}
.jbb .dom-row + .dom-row{border-top:0}
.jbb .prompt-h{border-bottom:0; padding-bottom:0}
.jbb .shot img{border-bottom:0}
.jbb .pv-simple{border-color:transparent; box-shadow:inset 0 0 0 1px var(--line)}
.jbb .fields{display:flex; flex-direction:column; gap:var(--sp-1)}
.jbb .fld{font:inherit; font-size:15px; line-height:1.5; color:var(--ink); background:var(--card); border:1px solid var(--field); border-radius:var(--r-sm); padding:10px var(--px); width:100%; resize:vertical; min-height:96px}
.jbb .fld::placeholder{color:#66605A}
.jbb .fld:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(159,229,0,.45)}
/* the total: bigger and bolder (her call, 2026-10-20) */
.jbb .cost .tot{padding-top:var(--sp-2); margin-top:var(--sp-1); align-items:center}
.jbb .cost .tot b{font-size:22px; font-weight:700; letter-spacing:-.01em}
/* UI pass: add-page row fits its placeholder and the button matches the box height */
.jbb .addpage{max-width:440px}
.jbb .addrow{align-items:stretch}
.jbb .addrow .btn{padding:0 14px; display:inline-flex; align-items:center}
/* one-line booking link field */
.jbb .fld.one{min-height:0; border-radius:var(--r-sm); padding:10px var(--px)}
/* real brand icons in the tools row */
.jbb .tools img.ic{width:36px; height:36px; object-fit:contain}
.jbb .tools img.ic-claude,.jbb .tools img.ic-godaddy{border-radius:9px}
.jbb .tools img.ic-local,.jbb .tools img.ic-wordpress{border-radius:50%}
@media (max-width:560px){.jbb .tools img.ic{width:26px; height:26px}.jbb .tools img.ic-claude,.jbb .tools img.ic-godaddy{border-radius:6px}}
/* Phones: text runs the full width, out to the edge of the buttons, before
   wrapping. The theme's text-wrap:pretty (and balance on headings) breaks
   lines early to even them out, which on a narrow screen leaves every line
   short of the buttons. */
@media (max-width:600px){
  .jbb, .jbb p, .jbb li, .jbb span, .jbb label, .jbb h1, .jbb h2, .jbb .note, .jbb .notes p, .jbb .cnotes p{ text-wrap:wrap }
}