/* the widget-wall tile designs, copied from ../assets/css/site.css (lines 889–1007 on 30 Sep) so phones don't load the desktop stylesheet. The desktop hover lift is dropped. */
/* the tiles: one business, its customer's question, one answer, one drawing made for that answer */
.wt { flex: none; height: 312px; margin-right: 24px; }
.wt .w-tile { height: 100%; padding: 18px 20px 14px; transition: transform .5s var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 34px 44px -28px rgba(20, 14, 8, .55); }
.wg.wt--light { --w-hi: var(--w-paper); --w-2: color-mix(in srgb, var(--w-paper) 76%, transparent); --w-3: color-mix(in srgb, var(--w-paper) 54%, transparent);
  --w-4: color-mix(in srgb, var(--w-paper) 30%, transparent); --w-fill: color-mix(in srgb, var(--w-paper) 7%, transparent); --w-fill-2: color-mix(in srgb, var(--w-paper) 15%, transparent); }
.wt--light .w-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(20, 14, 8, .06), 0 34px 44px -30px rgba(20, 14, 8, .35); }
.wt--light .w-tile::before { opacity: .6; }
.wx-top { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--bk-sans); letter-spacing: -.005em; color: var(--w-hi); }
.wx-mark { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--w-gold); color: var(--w-ink); font: 600 13px/1 var(--wx-face); }
.wx-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wx-q { margin: 12px 0 0; font: italic 400 15px/1.3 'Newsreader', Georgia, serif; color: var(--w-2); }
.wx-q::before { content: "“"; } .wx-q::after { content: "”"; }
.wx-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 9px; border-radius: 999px; background: var(--w-fill); font: 600 11.5px/1 var(--bk-sans); color: var(--w-gold); }
.wx-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bk-live 2s ease-in-out infinite; }
.wx-fig { margin: 6px 0 0; font: 500 36px/1.05 var(--wx-face); letter-spacing: -.022em; color: var(--w-hi); white-space: nowrap; font-variant-numeric: lining-nums; }
.wx-pill + .wx-fig { margin-top: 8px; }
.wx-fig em { font-style: normal; color: var(--w-gold); }
.wx-fig small { font-size: .46em; letter-spacing: 0; color: var(--w-2); }
.wx-fig--s { font-size: 28px; }
.wx-foot { margin-top: auto; display: grid; gap: 10px; }
.wx-note { margin: 0; font: 400 12.5px/1.35 var(--bk-sans); color: var(--w-2); }
.wx-src { margin: 12px 0 0; padding-top: 9px; border-top: 1px solid var(--w-fill); font: 400 11.5px/1.2 var(--bk-sans); color: var(--w-3); }
.wx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wx-svg--fit { max-width: 100%; }
.wx-svg--left { width: auto; height: 36px; justify-self: start; }
.wx-trk { fill: var(--w-fill); } .wx-trk2, .wx-dim { fill: var(--w-fill-2); } .wx-gold { fill: var(--w-gold); } .wx-hi { fill: var(--w-hi); }
.wx-lbl { font: 500 10.5px var(--bk-sans); fill: var(--w-3); } .wx-lbl.is-on { fill: var(--w-hi); font-weight: 600; } .wx-lbl--s { font-size: 8.5px; }
.wx-line { stroke: var(--w-gold); stroke-width: 2.2; } .wx-line--thin { stroke: var(--w-3); stroke-width: 1.5; } .wx-tick { stroke: var(--w-4); stroke-width: 1; stroke-dasharray: 2 3; }
.wx-ring { stroke: var(--w-fill-2); } .wx-ring-on { stroke: var(--w-gold); }
.wx-route { stroke: var(--w-4); stroke-width: 2; stroke-dasharray: .5 6; stroke-linecap: round; } .wx-route-on { stroke: var(--w-gold); stroke-width: 2.6; stroke-linecap: round; }
.wx-score { stroke: var(--w-ink); stroke-width: 1.3; stroke-linecap: round; opacity: .45; } .wx-score-f { fill: var(--w-ink); opacity: .3; }
.wx-axis { display: flex; justify-content: space-between; font: 500 11px/1.2 var(--bk-sans); color: var(--w-3); } .wx-axis .is-on { color: var(--w-hi); }
/* slots */
.wx-days { display: flex; gap: 6px; }
.wx-days span { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: 10px; background: var(--w-fill); font: 600 16px/1 var(--bk-sans); color: var(--w-hi); }
.wx-days small { font: 500 10px/1 var(--bk-sans); color: var(--w-3); }
.wx-days .is-on { background: var(--w-gold); color: var(--w-ink); } .wx-days .is-on small { color: var(--w-ink); opacity: .7; }
.wx-times { display: flex; gap: 6px; }
.wx-times span { flex: 1; padding: 8px 0; border-radius: 999px; text-align: center; box-shadow: inset 0 0 0 1px var(--w-fill-2); font: 600 12px/1 var(--bk-sans); color: var(--w-2); }
.wx-times .is-on { background: var(--w-hi); color: var(--w-ink); box-shadow: none; }
/* estimate */
.wx-slider { position: relative; height: 50px; }
.wx-slider b { position: absolute; top: 0; left: calc(var(--p) * 100%); transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--w-hi); color: var(--w-ink); font: 600 11px/1 var(--bk-sans); white-space: nowrap; }
.wx-slider i { position: absolute; left: 0; right: 0; top: 28px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--w-gold) calc(var(--p) * 100%), var(--w-fill-2) 0); }
.wx-slider i::after { content: ""; position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--w-hi); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.wx-slider span { position: absolute; top: 40px; font: 500 10.5px/1 var(--bk-sans); color: var(--w-3); }
.wx-slider span:last-of-type { right: 0; }
.wx-rows p { display: flex; justify-content: space-between; margin: 0; padding: 6px 0; border-top: 1px solid var(--w-fill); font: 500 12.5px/1.2 var(--bk-sans); color: var(--w-2); }
.wx-rows b { font-weight: 600; color: var(--w-hi); }
/* journey */
.wx-rail { list-style: none; margin: 0; padding: 0; }
.wx-rail li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 5px 0 5px 24px; font: 500 12.5px/1.2 var(--bk-sans); color: var(--w-3); }
.wx-rail li::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--w-fill-2); }
.wx-rail li:first-child::before { top: 50%; } .wx-rail li:last-child::before { bottom: 50%; }
.wx-rail li i { position: absolute; left: 3px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--w-ink); box-shadow: inset 0 0 0 1.5px var(--w-3); }
.wx-rail b { font-weight: 600; }
.wx-rail .is-done { color: var(--w-2); } .wx-rail .is-done i { background: var(--w-2); box-shadow: none; }
.wx-rail .is-on { color: var(--w-hi); } .wx-rail .is-on b { color: var(--w-gold); }
.wx-rail .is-on i { left: 1px; width: 13px; height: 13px; margin-top: -6.5px; background: var(--w-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-gold) 24%, transparent); }
/* phases */
.wx-phases { display: flex; gap: 4px; }
.wx-phases span { display: grid; gap: 6px; min-width: 0; }
.wx-phases i { height: 10px; border-radius: 5px; background: var(--w-gold); }
.wx-phases .p1 i { background: color-mix(in srgb, var(--w-gold) 58%, transparent); } .wx-phases .p2 i { background: color-mix(in srgb, var(--w-gold) 30%, transparent); }
.wx-phases b { font: 600 17px/1 var(--wx-face); color: var(--w-hi); } .wx-phases b small { font: 500 10px var(--bk-sans); color: var(--w-3); }
.wx-phases span > small { font: 500 11px/1 var(--bk-sans); color: var(--w-3); white-space: nowrap; }
/* countdown & season */
.wx-duo { margin: auto 0; display: flex; align-items: center; gap: 18px; }
.wx-dial { position: relative; flex: none; width: 96px; height: 96px; }
.wx-dial svg { width: 96px; height: 96px; }
.wx-dial b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 600 26px/1 var(--wx-face); color: var(--w-hi); }
.wx-dial b small { display: block; margin-top: 3px; font: 500 10px/1 var(--bk-sans); color: var(--w-3); }
.wx-duo__t { display: grid; gap: 8px; min-width: 0; }
.wx-duo .wx-fig { margin: 0; white-space: normal; text-wrap: balance; }
/* calendar */
.wx-mo { margin: 0; font: 600 11px/1 var(--bk-sans); color: var(--w-3); }
.wx-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; font: 500 10.5px/1 var(--bk-sans); color: var(--w-2); text-align: center; }
.wx-cal i { height: 15px; line-height: 15px; font-style: normal; }
.wx-cal .is-x { color: var(--w-4); text-decoration: line-through; }
.wx-cal .is-run { background: color-mix(in srgb, var(--w-gold) 28%, transparent); color: var(--w-hi); }
.wx-cal .is-a { border-radius: 9px 0 0 9px; } .wx-cal .is-b { border-radius: 0 9px 9px 0; } .wx-cal .is-a.is-b { border-radius: 9px; }
.wx-cal .is-a, .wx-cal .is-b { background: var(--w-gold); color: var(--w-ink); font-weight: 700; }
/* plans */
.wx-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wx-plans span { display: grid; gap: 5px; padding: 10px 9px; border-radius: 12px; background: var(--w-fill); }
.wx-plans small { font: 500 10.5px/1 var(--bk-sans); color: var(--w-3); }
.wx-plans b { font: 600 19px/1 var(--wx-face); color: var(--w-hi); }
.wx-plans em { font: normal 500 10px/1.2 var(--bk-sans); color: var(--w-3); }
.wx-plans .is-on { background: var(--w-gold); } .wx-plans .is-on small, .wx-plans .is-on b, .wx-plans .is-on em { color: var(--w-ink); }
/* sizes */
.wx-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wx-sizes span { display: grid; justify-items: center; gap: 5px; padding: 11px 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--w-fill-2); }
.wx-sizes b { font: 600 19px/1 var(--wx-face); color: var(--w-hi); } .wx-sizes small { font: 500 10px/1 var(--bk-sans); color: var(--w-3); }
.wx-sizes .is-on { background: var(--w-gold); box-shadow: none; } .wx-sizes .is-on b, .wx-sizes .is-on small { color: var(--w-ink); }
.wx-sizes .is-x { opacity: .45; } .wx-sizes .is-x b { text-decoration: line-through; }
/* menu */
.wx-menu p { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 7px 0; border-top: 1px solid var(--w-fill); font: 500 13px/1.2 var(--bk-sans); color: var(--w-2); }
.wx-menu i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.wx-menu span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wx-menu b { font-weight: 600; color: var(--w-hi); } .wx-menu .is-on span { color: var(--w-hi); }
/* tracker */
.wx-track { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.wx-track::before, .wx-track::after { content: ""; position: absolute; top: 6px; height: 2px; left: calc(50% / var(--n)); }
.wx-track::before { right: calc(50% / var(--n)); background: var(--w-fill-2); }
.wx-track::after { width: calc((100% - 100% / var(--n)) * var(--c) / (var(--n) - 1)); background: var(--w-gold); }
.wx-track li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font: 500 11px/1 var(--bk-sans); color: var(--w-3); }
.wx-track li i { width: 14px; height: 14px; border-radius: 50%; background: var(--w-ink); box-shadow: inset 0 0 0 2px var(--w-fill-2); }
.wx-track .is-done i { background: var(--w-gold); box-shadow: none; }
.wx-track .is-on { color: var(--w-hi); font-weight: 600; }
.wx-track .is-on i { background: var(--w-hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-gold) 34%, transparent); }
/* grid */
.wx-grid { display: grid; grid-template-columns: auto repeat(var(--c), 1fr); gap: 5px; align-items: center; }
.wx-grid small { font: 500 10px/1 var(--bk-sans); color: var(--w-3); text-align: center; }
.wx-grid .wx-grid__r { text-align: left; padding-right: 4px; white-space: nowrap; }
.wx-grid i { height: 22px; border-radius: 6px; background: var(--w-fill); }
.wx-grid .is-free { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--w-gold) 80%, transparent); }
.wx-grid .is-on { background: var(--w-gold); }