/* Web Design: "Work out your price" (price-builder.js), on the dark navy page beside the price list. */
.web-builder{display:grid;gap:20px;padding:clamp(22px,2.6vw,32px);align-self:start;position:sticky;top:96px}
.web-builder h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2vw,1.9rem);line-height:1.1;letter-spacing:-.02em;color:var(--p-ink)}
.web-builder fieldset{margin:0;padding:0;border:0;min-width:0}
.web-builder legend{padding:0;margin-bottom:9px;font-size:14px;font-weight:600;color:var(--p-ink)}
.wb-seg,.wb-langs{display:flex;flex-wrap:wrap;gap:8px}
.wb-seg label,.wb-langs label{position:relative;cursor:pointer}
.wb-seg input,.wb-langs input,.wb-care input{position:absolute;opacity:0;width:1px;height:1px}
.wb-seg span,.wb-langs span{display:inline-flex;align-items:center;min-height:40px;padding:8px 15px;border-radius:999px;border:1px solid #ffffff26;color:var(--p-muted);font-size:14.5px;font-weight:550;transition:background-color .2s,border-color .2s,color .2s,transform .15s}
.wb-seg label:hover span,.wb-langs label:hover span{border-color:#ffffff59;color:var(--p-ink)}
.wb-seg input:checked+span,.wb-langs input:checked+span{background:var(--gold-soft,#e8c57c);border-color:var(--gold-soft,#e8c57c);color:#0b1a33}
.wb-langs input:checked+span::before{content:"";width:9px;height:5px;margin-right:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.wb-seg input:focus-visible+span,.wb-langs input:focus-visible+span,.wb-care input:focus-visible+.wb-switch{outline:2px solid var(--gold-soft,#e8c57c);outline-offset:2px}
.wb-step{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wb-step button{width:40px;height:40px;border-radius:50%;border:1px solid #ffffff33;background:transparent;color:var(--p-ink);font:inherit;font-size:20px;line-height:1;cursor:pointer;transition:background-color .2s,transform .15s}
.wb-step button:hover:not(:disabled){background:#ffffff14}
.wb-step button:active:not(:disabled){transform:scale(.92)}
.wb-step button:disabled{opacity:.35;cursor:default}
.wb-step output{min-width:2.4ch;text-align:center;font-size:24px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--p-ink)}
.wb-dots{display:flex;flex-wrap:wrap;gap:3px;margin-left:6px;max-width:220px}
.wb-dots i{width:9px;height:12px;border-radius:2px;background:var(--gold-soft,#e8c57c);animation:wb-pop .35s cubic-bezier(.34,1.56,.64,1) both}
.wb-dots i.is-extra{background:#9db4ff}
@keyframes wb-pop{from{transform:scale(.3);opacity:0}}
.wb-care{display:flex;align-items:center;gap:12px;cursor:pointer;color:var(--p-ink);font-size:14.5px}
.wb-switch{flex:none;position:relative;width:42px;height:24px;border-radius:999px;background:#ffffff26;transition:background-color .25s}
.wb-switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.wb-care input:checked+.wb-switch{background:var(--gold-soft,#e8c57c)}
.wb-care input:checked+.wb-switch::after{transform:translateX(18px)}
.wb-result{display:grid;gap:4px;padding:18px 20px;border-radius:var(--r-md,14px);background:#ffffff0d;border:1px solid #ffffff1f}
.wb-result small{font-size:13px;color:var(--p-muted)}
.wb-result b{font-size:16px;color:var(--p-ink)}
.wb-result strong{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.01em;color:var(--gold-soft,#e8c57c)}
.wb-result span{font-size:14px;color:var(--p-muted)}
.web-builder .btn{justify-self:start}
.wb-promise{margin:0;font-size:14px;color:var(--p-muted)}
.wb-promise b{color:var(--p-ink);font-weight:600}
.web-builder .web-host{margin:0;border-top-color:#ffffff1a;color:var(--p-muted)}
/* the matching rows in the price list */
.web2 .rows>li{transition:background-color .3s,box-shadow .3s}
.web2 .rows>li.is-match{background:#e8c57c12;box-shadow:inset 3px 0 0 var(--gold-soft,#e8c57c)}
.web2 .rows>li.is-match .rows__name{color:var(--gold-soft,#e8c57c)}
.web2 .rows>li{padding-inline:14px}
@media(max-width:900px){.web-builder{position:static}}
@media(max-width:520px){.web-builder .btn{justify-self:stretch;justify-content:center}}
.wb-how{font-style:normal;font-size:13.5px;color:var(--p-muted);font-variant-numeric:tabular-nums}
.wb-lines{display:grid;gap:2px;margin:8px 0 4px;padding:0;list-style:none}
.wb-lines li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--p-muted);font-variant-numeric:tabular-nums}
.wb-lines li span:last-child{color:var(--p-ink)}
.wb-note{margin:8px 0 0;font-size:13px;color:var(--gold-soft,#e8c57c)}