/* Design controller stylesheet (Garrett 2026-11-01): the controller panel and the app screens around it, never exported to
   Webflow, not under the element-level gate. Design CSS lives in champs.css only. First the panel (public/runtime/controller.js,
   rebuilt 2026-11-01), then the rules of app parts still to be rebuilt (plans, offer modal, hero media settings, QC dock,
   private link bar): each goes when its part is rebuilt. */
/* ===== Design controller: the panel (from design-controller.js style#cdc-styles + sidecar.js shell rules, 2026-11-01) =====
   Keyed on the panel's own classes and on html[data-cdc-panel="open|closed"]. No !important: nothing on the page
   competes with these selectors any more (the old !important fought the retired .chp panel's own CSS). */

/* tokens: the panel's (--k-*) and the rail / section rows' (--chsx-*) */
html[data-cdc-panel]{--k-panel:#151716;--k-panel2:#202322;--k-ink:#f2f3f1;--k-muted:#a5aaa7;--k-line:#343937;--k-accent:#fab22b;
  --chsx-bg:#151716;--chsx-panel:#1c1f1e;--chsx-panel2:#232624;--chsx-line:#2e322f;--chsx-line2:#3a3d3b;--chsx-ink:#f2f3f1;
  --chsx-muted:#9aa09c;--chsx-accent:#e8c547;--chsx-on-accent:#151716;--chsx-heart:#ff6b6b;--chsx-shadow:rgba(0,0,0,.35)}

/* page push: the design narrows instead of being covered (rail 44px, column 380px); --chsx-gap for corner widgets */
html[data-cdc-panel="closed"]{--chsx-gap:44px}
html[data-cdc-panel="open"]{--chsx-gap:380px}
html[data-cdc-panel="closed"] body{padding-right:44px;overflow-x:hidden}
html[data-cdc-panel="open"] body{padding-right:380px;overflow-x:hidden}
/* phones: the open column hides the website's chat and cookie widgets (!important: the widgets set their own display) */
@media (max-width:767px){html[data-cdc-panel="open"] [data-champs-widget],html[data-cdc-panel="open"] [data-cookie-settings-host]{display:none!important}}

/* the closed rail */
.chsx-rail{position:fixed;top:0;right:0;bottom:0;width:44px;z-index:2147483640;background:var(--chsx-bg);border-left:1px solid var(--chsx-line);display:none;
  flex-direction:column;align-items:center;gap:8px;padding:10px 0;box-sizing:border-box}
html[data-cdc-panel="closed"] .chsx-rail{display:flex}
.chsx-rail .chsx-open-btn{writing-mode:vertical-rl;transform:rotate(180deg);border:0;background:none;color:var(--chsx-ink);font:600 12px/1 Inter,system-ui,sans-serif;
  letter-spacing:.08em;cursor:pointer;padding:12px 0}
.chsx-rail .chsx-foot{margin-top:auto;display:grid;gap:6px;justify-items:center}

/* the column: flush, full height, a scrolling body between a sticky header and a pinned footer */
.chd.cdc{font:13px/1.45 Inter,system-ui,sans-serif;color:var(--k-ink)}
.chd.cdc #chb{position:fixed;top:0;right:0;bottom:0;left:auto;width:380px;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:14px;box-sizing:border-box;
  background:var(--k-panel);color:var(--k-ink);border-radius:0;border-left:1px solid var(--k-line);box-shadow:none;z-index:2147483646;
  display:none;flex-direction:column;gap:0;overflow:hidden}
html[data-cdc-panel="open"] .chd.cdc #chb{display:flex}
.chd.cdc #chb>.cdc-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.chd.cdc .cdc-body>*{flex:none;margin:0}

/* header row: title, QC slot, minimize; sticks to the top while the body scrolls */
.chd.cdc .cdc-h{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:3;background:var(--k-panel)}
.chd.cdc .cdc-h h2{margin:0;font:600 15px/1.2 Inter,system-ui,sans-serif;color:var(--k-ink);letter-spacing:0}
.chd.cdc .chsx-qc{display:inline-flex;gap:6px;margin-left:auto;margin-right:6px}
.chd.cdc .cdc-x{width:26px;height:26px;min-width:0;padding:0;margin:0;box-sizing:border-box;border-radius:999px;border:1px solid var(--k-line);background:transparent;
  color:var(--k-ink);font-size:0;line-height:0;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.chd.cdc .cdc-x::before{content:"";display:block;width:10px;height:1.5px;border-radius:1px;background:currentColor}
.chd.cdc .cdc-x:hover{border-color:var(--k-accent)}

/* business line */
.chd.cdc .cdc-biz{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--k-panel2);border-radius:10px;padding:9px 11px;min-height:40px;box-sizing:border-box}
.chd.cdc .cdc-biz_line{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px Inter,system-ui,sans-serif;color:var(--k-ink)}
.chd.cdc .cdc-acts{display:flex;gap:12px}
.chd.cdc .cdc-link{background:none;border:0;color:var(--k-accent);font:500 12px Inter,sans-serif;cursor:pointer;padding:0}

/* pickers: Page, the Style summary and its four subpicks; one height, one corner */
.chd.cdc .cdc-pick{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-width:0;height:40px;min-height:40px;padding:0 11px;box-sizing:border-box;overflow:hidden;
  background:var(--k-panel2);border:1px solid var(--k-line);border-radius:10px;color:var(--k-ink);font:500 12.5px Inter,sans-serif;cursor:pointer;text-align:left}
.chd.cdc .cdc-pick[aria-expanded="true"]{border-color:var(--k-accent)}
.chd.cdc .cdc-pick em{font-style:normal;color:var(--k-muted);font-size:12px;white-space:nowrap}
.chd.cdc .cdc-pick b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chd.cdc .cdc-pick i{font-style:normal;color:var(--k-muted);font-weight:400;font-size:11px}
.chd.cdc .cdc-subpick>span{color:var(--k-muted);min-width:56px;flex:none}
.chd.cdc .cdc-subpick b{flex:1;text-align:left}
.chd.cdc .cdc-pagepick{margin:0}
.chd.cdc .cdc-stack{display:grid;gap:6px}
.chd.cdc .cdc-f{display:grid;gap:8px;min-width:0}
.chd.cdc .cdc-f .cdc-pick{background:var(--k-panel)}

/* Style: a closed accordion; open, it becomes a card holding its subpicks */
.chd.cdc .cdc-style{display:block;padding:0;background:none}
.chd.cdc .cdc-style[open]{padding:.625rem;background:var(--k-panel2);border-radius:.625rem}
.chd.cdc .cdc-style>summary{list-style:none;cursor:pointer}
.chd.cdc .cdc-style>summary::-webkit-details-marker{display:none}
.chd.cdc .cdc-style>summary em{transition:transform .15s}
.chd.cdc .cdc-style[open]>summary{border-color:var(--k-accent)}
.chd.cdc .cdc-style[open]>summary em{transform:rotate(90deg)}
.chd.cdc .cdc-style>.cdc-stack{margin-top:.375rem}

/* swatches: each dot's color arrives as --cdc-swatch */
.chd.cdc .cdc-sw{display:inline-flex;gap:3px;vertical-align:middle}
.chd.cdc .cdc-sw i{width:13px;height:13px;border-radius:50%;display:block;border:1px solid rgba(255,255,255,.25);background:var(--cdc-swatch,transparent)}

/* footer: Saved, then Send my picks, pinned under the body */
.chd.cdc #chb>.cdc-foot{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--k-line)}
.chd.cdc .cdc-foot>*{display:flex;align-items:center;justify-content:center;height:38px;min-height:40px;padding:0 6px;box-sizing:border-box;white-space:nowrap;
  background:var(--k-panel2);color:var(--k-ink);border:1px solid var(--k-line);border-radius:10px;font:500 12px Inter,sans-serif;cursor:pointer;text-align:center;text-decoration:none}
.chd.cdc .cdc-foot>[aria-expanded="true"]{border-color:var(--k-accent)}
.chd.cdc .cdc-foot .cdc-send{background:var(--k-accent);color:#151716;border-color:var(--k-accent);padding-top:12px;padding-bottom:12px}
.chd.cdc .cdc-card:focus-visible,.chd.cdc .cdc-pick:focus-visible,.chd.cdc .cdc-foot>*:focus-visible,.chd.cdc .cdc-link:focus-visible{outline:2px solid var(--k-accent);outline-offset:2px}

/* shelves: a full-height column over the panel */
.chd.cdc .cdc-shelf{position:fixed;top:0;right:0;bottom:0;left:auto;width:380px;max-width:100vw;height:100dvh;max-height:100dvh;overflow:auto;overscroll-behavior:contain;
  background:var(--k-panel);color:var(--k-ink);border-radius:0;padding:16px;display:grid;gap:12px;align-content:start;box-shadow:none;z-index:2147483647;box-sizing:border-box}
.chd.cdc .cdc-shelf[hidden]{display:none}
.chd.cdc .cdc-shelf,.chd.cdc #chb{scrollbar-width:none}
.chd.cdc .cdc-shelf::-webkit-scrollbar,.chd.cdc #chb::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:no-preference){.chd.cdc .cdc-shelf{animation:cdcIn .16s ease-out}@keyframes cdcIn{from{opacity:0;transform:translateX(10px)}}}
.chd.cdc .cdc-shelf h3{margin:0;font:600 14px/1.2 Inter,sans-serif;color:var(--k-ink)}
.chd.cdc .cdc-shelf p{margin:0;color:var(--k-muted);font-size:12px}
.chd.cdc .chsx-shelfhead{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--k-line)}
.chd.cdc .cdc-back{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--k-line);border-radius:999px;background:none;color:var(--k-ink);font:500 12px/1 Inter,system-ui,sans-serif;cursor:pointer}
.chd.cdc .cdc-back:hover{border-color:var(--k-accent)}
.chd.cdc .cdc-grp{font-size:10.5px;color:var(--k-muted);text-transform:uppercase;letter-spacing:.07em;margin-top:4px}

/* tabs */
.chd.cdc .cdc-tabs{display:flex;gap:4px;background:var(--k-panel2);border-radius:10px;padding:4px;position:sticky;top:-16px;z-index:2}
.chd.cdc .cdc-tabs button{flex:1;border:0;border-radius:7px;background:none;color:var(--k-muted);font:600 12.5px Inter,sans-serif;padding:8px;cursor:pointer}
.chd.cdc .cdc-tabs button[aria-selected="true"]{background:var(--k-accent);color:#151716}
.chd.cdc [data-cdc-pane],.chd.cdc [data-cdc-cview]{display:grid;gap:10px}
.chd.cdc [data-cdc-cview]{gap:12px}
.chd.cdc [data-cdc-pane][hidden],.chd.cdc [data-cdc-cview][hidden]{display:none}

/* cards */
.chd.cdc .cdc-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chd.cdc .cdc-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chd.cdc .cdc-fontgroups{display:grid;gap:8px}
.chd.cdc .cdc-card{background:var(--k-panel2);border:1px solid var(--k-line);border-radius:10px;padding:10px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;cursor:pointer;
  color:var(--k-ink);text-align:left;font:500 12.5px Inter,sans-serif;text-decoration:none;min-width:0}
.chd.cdc .cdc-card small{color:var(--k-muted);font-size:11px;font-weight:400;background:none}
.chd.cdc .cdc-card.cur,.chd.cdc .cdc-card[aria-pressed="true"]{border-color:var(--k-accent);box-shadow:0 0 0 1px var(--k-accent)}
.chd.cdc .cdc-pagename{font:600 15px/1.2 system-ui}
/* font cards: each set in its own pairing (--cdc-font-heading / --cdc-font-body on the card) */
.chd.cdc .cdc-fontname{font:600 16px/1.2 var(--cdc-font-heading,serif)}
.chd.cdc .cdc-fontbody{font-family:var(--cdc-font-body,sans-serif)}
/* corner cards: the corner drawn at its radius (--cdc-corner-radius) */
.chd.cdc .cdc-corner{display:block;height:2.75rem;border:2px solid var(--k-ink);border-right:0;border-bottom:0;margin:.25rem 0 .375rem;border-radius:var(--cdc-corner-radius,0)}
/* button cards: the design's own .button, with that set's --button-* tokens on the preview box; scaled to fit the card */
.chd.cdc .cdc-btnprev{background:#f5f6f2;border-radius:8px;padding:12px 10px;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;grid-column:1/-1;width:100%;box-sizing:border-box;pointer-events:none;color:#151716;min-width:0;overflow:hidden}
.chd.cdc .cdc-btnprev .button{margin:0;zoom:.8;max-width:100%;min-width:0;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;text-align:center}

/* colors: Add your brand colors, the brand view's four inputs and the button color */
.chd.cdc .cdc-addbrand .plus{width:39px;height:13px;display:grid;place-items:center;font:600 16px/1 Inter,sans-serif;color:var(--k-accent)}
.chd.cdc .cdc-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chd.cdc .cdc-color{display:flex;align-items:center;gap:10px;background:var(--k-panel2);border:1px solid var(--k-line);border-radius:10px;padding:9px 11px;cursor:pointer;font:500 13px Inter,sans-serif}
.chd.cdc .cdc-color input{width:30px;height:30px;border:0;padding:0;background:none;border-radius:8px;cursor:pointer;flex:none}
.chd.cdc .cdc-color.is-mini{padding:3px;border-radius:999px}
.chd.cdc .cdc-color.is-mini input{width:22px;height:22px;border-radius:999px}
.chd.cdc .cdc-btncolor{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--k-panel2);border:1px solid var(--k-line);border-radius:10px;padding:7px 9px 7px 11px;font:500 13px Inter,sans-serif}
.chd.cdc .cdc-btncolor .cdc-seg{display:flex;align-items:center;gap:4px}
.chd.cdc .cdc-btncolor button{border:1px solid var(--k-line);background:none;color:var(--k-ink);border-radius:999px;padding:4px 10px;font:500 12px Inter,sans-serif;cursor:pointer}
.chd.cdc .cdc-btncolor button[aria-pressed="true"],.chd.cdc .cdc-btncolor .is-mini[aria-pressed="true"]{border-color:var(--k-accent);background:var(--k-accent);color:#111}
.chd.cdc .cdc-plain{justify-self:start;background:var(--k-panel2);border:1px solid var(--k-line);color:var(--k-ink);border-radius:999px;padding:7px 14px;font:500 12px Inter,sans-serif;cursor:pointer}

/* section rows (part 2): sidecar.js's .chsx-row rule had a stray '}' after "gap:4px;", which dropped the row's font and
   color AND swallowed the next rule (.chsx-row .chsx-name{min-width:0}) into an invalid selector. Fixed here. */
.chsx-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;align-items:start;gap:4px;font:500 12.5px/1.25 Inter,system-ui,sans-serif;color:var(--k-ink,var(--chsx-ink))}
.chsx-row .chsx-name{min-width:0}

/* Design controller part 2: "Sections here", rows, hearts, section mode button, hover controls, saved shelf items.
   From sidecar.js's injected <style>, cleaned: own classes and data hooks only, no !important.
   The --chsx-* tokens are the same values as the panel's; drop this :root block on merge if controller-panel.css has it. */
:root{--chsx-bg:#151716;--chsx-panel:#1c1f1e;--chsx-panel2:#232624;--chsx-line:#2e322f;--chsx-line2:#3a3d3b;--chsx-ink:#f2f3f1;
  --chsx-muted:#9aa09c;--chsx-accent:#e8c547;--chsx-on-accent:#151716;--chsx-heart:#ff6b6b;--chsx-shadow:rgba(0,0,0,.35)}

/* the list: fixed height, scrolls inside itself so nothing shifts */
.chsx-secs{display:grid;gap:4px;margin:10px 0;padding:10px;border-radius:10px;background:var(--k-panel2,var(--chsx-panel2));
  height:232px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.chsx-secs h4{margin:0 0 4px;font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--k-muted,var(--chsx-muted))}
.chsx-secs .chsx-none{font:12px/1.4 Inter,system-ui,sans-serif;color:var(--k-muted,var(--chsx-muted))}
.chsx-sechead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px}
.chsx-sechead h4{margin:0}
.chsx-sechead .chsx-explore{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--k-line,var(--chsx-line2));
  color:var(--k-ink,var(--chsx-ink));font:500 11px/1 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.chsx-sechead .chsx-explore:hover{border-color:var(--k-accent,var(--chsx-accent))}

/* a row: name + number, heart, mode, previous, next (the old rule's stray '}' dropped its font and color; restored here) */
.chsx-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;align-items:start;gap:4px;
  font:500 12.5px/1.25 Inter,system-ui,sans-serif;color:var(--k-ink,var(--chsx-ink))}
.chsx-row.cur{background:var(--k-panel2,#202322);border-radius:8px}
.chsx-row .chsx-name{min-width:0}
.chsx-row .chsx-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.chsx-row .chsx-top b{font-weight:500;cursor:pointer;white-space:nowrap}
.chsx-row small{display:block;cursor:pointer;color:var(--k-muted,var(--chsx-muted));font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chsx-row button{width:26px;height:26px;margin-top:2px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;
  border:1px solid var(--k-line,var(--chsx-line2));background:var(--k-panel,var(--chsx-panel));color:var(--k-ink,var(--chsx-ink));cursor:pointer;font:16px/1 system-ui}
.chsx-row button:not([disabled]):hover{border-color:var(--k-accent,var(--chsx-accent))}
.chsx-row button[disabled]{opacity:.35;cursor:default}
.chsx-row button[hidden]{display:none}
.chsx-row button svg{display:block;width:16px;height:16px;pointer-events:none}
.chsx-row .chsx-heart{font-size:14px}

/* heart on: saved */
.chsx-heart[aria-pressed="true"]{color:var(--chsx-heart);border-color:var(--chsx-heart)}
/* Champs view (Oct 31): gold = suggested by Champs; pink with a gold ring = the client's favorite that Champs also suggested */
.chsx-heart.is-suggested{color:var(--chsx-accent);border-color:var(--chsx-accent)}
.chsx-heart.is-both{box-shadow:0 0 0 2px var(--chsx-accent)}

/* Back to your site (Oct 31): a link under the shelf head on gallery pages, and an icon at the top of the closed rail */
.chsx-backrow{border-bottom:0;padding-bottom:0;margin:10px 0 2px}
a.chsx-siteback{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--k-line,var(--chsx-line2));border-radius:999px;color:var(--k-ink,var(--chsx-ink));font:500 12px/1 Inter,system-ui,sans-serif;text-decoration:none;background:none;cursor:pointer}
a.chsx-railback{display:inline-flex;align-items:center;justify-content:center;width:36px;height:26px;box-sizing:border-box;border-radius:999px;border:1px solid var(--chsx-line2);color:var(--chsx-ink);text-decoration:none}
a.chsx-railback:hover,a.chsx-siteback:hover{border-color:var(--chsx-accent)}
.chsx-railback svg{display:block;width:16px;height:16px}

/* section mode button: the mode's swatch and number (the swatch color is the --chsx-swatch value the script sets) */
.chsx-row button.chsx-swbtn,.chsx-hc button.chsx-swbtn{width:auto;min-width:0;padding:0 6px;gap:4px;font:600 11px/1 system-ui;font-variant-numeric:tabular-nums}
.chsx-swbtn i{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px;background:var(--chsx-swatch,transparent);box-shadow:inset 0 0 0 1px rgba(128,128,128,.8)}
.chsx-hc .chsx-swbtn i{width:14px;height:14px}

/* hover controls: pinned inside the hovered design's top-right corner (position from --chsx-hc-x / --chsx-hc-y) */
.chsx-hc{position:fixed;left:var(--chsx-hc-x,0);top:var(--chsx-hc-y,0);z-index:2147483600;display:none;gap:4px;padding:4px;border-radius:10px;
  background:var(--chsx-bg);border:1px solid var(--chsx-line2);box-shadow:0 6px 20px var(--chsx-shadow)}
.chsx-hc[data-cdc-on]{display:flex}
/* phones (Garrett 2026-11-02): the panel is a bottom sheet over half the screen, so the page stays in view while a color,
   font or design is picked; the grip on top toggles it to nearly full height (html[data-cdc-sheet="full"]) */
.chd.cdc .cdc-grip{display:none}
@media (max-width:767px){
  html[data-cdc-panel="open"]{--chsx-gap:0px}
  html[data-cdc-panel="open"] body{padding-right:0;padding-bottom:56dvh}
  .chd.cdc #chb,.chd.cdc .cdc-shelf{top:auto;left:0;right:0;bottom:0;width:100%;height:56dvh;max-height:56dvh;border-left:0;
    border-top:1px solid var(--k-line);border-radius:16px 16px 0 0;box-shadow:0 -12px 32px rgba(0,0,0,.28)}
  html[data-cdc-sheet="full"] .chd.cdc #chb,html[data-cdc-sheet="full"] .chd.cdc .cdc-shelf{height:92dvh;max-height:92dvh}
  .chd.cdc .cdc-grip{display:block;flex:none;width:44px;height:5px;margin:-6px auto 8px;padding:0;border:0;border-radius:3px;background:var(--k-line);cursor:pointer;
    box-shadow:0 0 0 10px transparent}
}
.chsx-hc button{width:30px;height:30px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:7px;
  border:1px solid var(--chsx-line2);background:var(--chsx-panel);color:var(--chsx-ink);cursor:pointer;font:16px/1 system-ui}
.chsx-hc button[hidden]{display:none}
.chsx-hc button svg{display:block;width:16px;height:16px;pointer-events:none}
.chsx-hc button:hover{border-color:var(--chsx-accent)}
.chsx-hc .chsx-heart{font-size:14px}

/* saved shelf: "Open saved page", and a remove button on each saved card */
a.chsx-savedlink{display:inline-block;margin:0 0 12px;background:var(--k-accent,var(--chsx-accent));color:var(--chsx-on-accent);border-radius:999px;padding:8px 14px;
  font:600 12.5px/1 Inter,system-ui,sans-serif;text-decoration:none}
.chsx-saveditem{position:relative;min-width:0}
.chsx-saveditem .cdc-card{padding-right:30px}
.chsx-unsave{position:absolute;top:6px;right:6px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  border:1px solid var(--k-line,var(--chsx-line2));background:var(--k-panel,var(--chsx-panel));color:var(--k-ink,var(--chsx-ink));font:14px/1 system-ui;cursor:pointer}
.chsx-unsave:hover{border-color:var(--chsx-heart);color:var(--chsx-heart)}

/* ===== App parts still to be rebuilt (old rules, unchanged) ===== */
#chs-loader { display: none !important; }
:is(.chs-profile-fields:not(:where([data-chs-v])),[data-chs-v~="chs-profile-fields"]) {border:0;padding:0;margin:1.5rem 0;display:grid;gap:1rem;min-width:0}
:is(.chs-profile-fields:not(:where([data-chs-v])),[data-chs-v~="chs-profile-fields"]) legend {font:inherit;margin-bottom:1rem}
:is(.chs-profile-fields:not(:where([data-chs-v])),[data-chs-v~="chs-profile-fields"]) label {display:grid;gap:.5rem;font:inherit}
:is(.chs-profile-fields:not(:where([data-chs-v])),[data-chs-v~="chs-profile-fields"]) input, :is(.chs-profile-fields:not(:where([data-chs-v])),[data-chs-v~="chs-profile-fields"]) select, :is(.chs-profile-fields:not(:where([data-chs-v])),[data-chs-v~="chs-profile-fields"]) textarea {width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:16px;border-radius:var(--_sizes---border-radius--small,0);color:inherit;background:transparent;border:1px solid currentColor;padding:.75rem}
:is(.chs-profile-fields:not(:where([data-chs-v])),[data-chs-v~="chs-profile-fields"]) textarea {min-height:100px;resize:vertical}
.coll-shelf[hidden] { display: none; }
.coll-shelf .coll-shelf_target { flex-basis: 100%; margin: 0; font: 400 .7rem/1.4 system-ui; color: var(--chsx-muted, #9aa3a0); }
.coll-shelf .coll-shelf_target:empty { display: none; }
.coll-shelf .coll-shelf_row { flex-basis: 100%; margin-top: .25rem; }
.coll-shelf .coll-shelf_row .hero-media-settings_controls { flex-wrap: wrap; }
.chsx-browse-heroes { display:block; margin-top:5px; font:inherit; color:var(--chsx-accent); background:none; border:0; padding:0; text-align:left; }
.hero-browser { width:min(56rem,calc(100vw - 2rem)); max-height:85dvh; padding:1.5rem; background:#151716; color:#f2f3f1; border:1px solid #3a3d3b; border-radius:.75rem; }
.hero-browser::backdrop { background:rgb(0 0 0 / .65); }
.hero-browser header { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.hero-browser h2 { margin:0; font:600 1.4rem/1.4 system-ui; }
.hero-browser p { font:400 1rem/1.5 system-ui; }
.hero-browser button { padding:.65rem .85rem; border:1px solid #555; border-radius:.3rem; background:#232624; color:inherit; font:500 .9rem/1.4 system-ui; cursor:pointer; }
.hero-browser button[aria-pressed=true] { border-color:#e8c547; color:#e8c547; }
.hero-browser_filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.hero-browser [data-hero-choices] { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.5rem; }
.hero-media-settings h3 {font:600 .7rem/1.4 system-ui;margin:0;color:var(--chsx-muted,#9aa3a0);letter-spacing:.04em}
.hero-media-settings button {font:500 .7rem/1.2 system-ui;border:1px solid var(--chsx-line2,#555);border-radius:999px;background:var(--chsx-panel2,#232624);color:var(--chsx-ink,#f2f3f1);padding:.28rem .65rem;cursor:pointer;min-height:0}
.hero-media-settings button[aria-pressed="true"] {background:var(--chsx-accent,#e8c547);color:var(--chsx-on-accent,#151716);border-color:var(--chsx-accent,#e8c547)}
.hero-media-settings button:focus-visible {outline:2px solid var(--chsx-accent,#e8c547);outline-offset:3px}
.hero-media-settings button:disabled {opacity:.55;cursor:not-allowed}
.hero-media_control {position:absolute;right:1rem;bottom:1rem;z-index:5;border:1px solid var(--_theme---border--primary);padding:.65rem 1rem;background:var(--_theme---background--card);color:var(--_theme---text--heading);font:inherit;cursor:pointer;display:none}
[data-hero-medium="video"] .hero-media_control {display:block}
.hero-media-settings {display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.4rem .55rem;margin-block:.5rem;border:1px solid var(--chsx-line,#3a3d3b);border-radius:.5rem;background:var(--chsx-panel,#1c1f1e);color:var(--chsx-ink,#f2f3f1)}
.hero-media-settings [data-hero-media-target] {display:none}
.hero-media-settings [data-hero-media-status] {flex-basis:100%;font:400 .68rem/1.4 system-ui;margin:0;color:var(--chsx-muted,#9aa3a0)}
.hero-media-settings [data-hero-media-status]:empty {display:none}
.hero-media-settings_controls {display:flex;gap:.25rem;margin-left:auto}
@media print {
.hero-media_control, .hero-media-settings {display:none!important}
}
.hero-overlay .hero-media-label {font:600 .7rem/1.4 system-ui;color:var(--chsx-muted,#9aa3a0);letter-spacing:.04em}
.hero-overlay input[type="range"] {width:5.5rem;accent-color:var(--chsx-accent,#e8c547);cursor:pointer}
.hero-overlay {display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.4rem}
.hero-media-settings {min-height:2.4rem}
.hero-media-settings_controls.is-disabled {opacity:.45;pointer-events:none}
.hero-overlay.is-disabled {opacity:.45;pointer-events:none}
.hero-media-settings:not(.is-idle) {min-height:5.4rem;align-content:start}
.hero-media-settings .hero-media_mode {width:26px;height:26px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;margin-right:.15rem}
.hero-media-settings .hero-media_mode svg {width:14px;height:14px}
.hero-media-settings.is-idle>*:not(h3) {display:none!important}
.hero-media-settings.is-idle h3 {opacity:.55}
.hero-media-settings h3 .coll-shelf_pin {margin-left:.4rem;font:500 .68rem/1.2 system-ui;color:var(--chsx-ink,#f2f3f1);background:var(--chsx-panel2,#232624);border:1px solid var(--chsx-line2,#555);border-radius:999px;padding:.15rem .45rem;text-transform:none;letter-spacing:0;max-width:11rem}
.hero-media-settings.is-idle h3 .coll-shelf_pin {opacity:1}
.hero-media-settings.is-live {border-color:var(--chsx-accent,#e8c547)}
.hero-media-settings.is-idle {min-height:0;padding:.45rem .55rem}
.hero-media-settings h3 {display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;min-height:1.65rem}
.hero-media-settings h3 .hero-media_mode {margin:0 0 0 .1rem;flex:0 0 auto}
.hero-media-settings.is-idle>h3 {display:flex!important}
html[data-chs-modes] .hero-media-settings [data-hero-mode], html[data-chs-modes] .coll-shelf [data-coll-mode] {display:none!important}
.coll-shelf_modes {display:flex;flex-direction:column;align-items:stretch;gap:6px;flex-basis:100%}
.coll-shelf_modes[hidden] {display:none}
.coll-modes {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hero-media-settings .coll-modesw {display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:4px 0;border-radius:6px;border:1px solid var(--k-line,var(--chsx-line2,#3a3f3b));background:transparent;color:inherit;font:inherit;font-size:11px;line-height:1;cursor:pointer}
.coll-modesw i {display:block;width:26px;max-width:100%;height:26px;border-radius:5px;background:var(--chsx-swatch,transparent);box-shadow:inset 0 0 0 1px rgba(128,128,128,.8)}
.hero-media-settings .coll-modesw[aria-checked="true"] {border:2px solid var(--k-accent,var(--chsx-accent,#e8c547));padding:3px 0;background:transparent;color:inherit}
.coll-modesw[aria-disabled="true"] {border-style:dashed;cursor:default;opacity:.55}
.coll-modesw[aria-disabled="true"][aria-checked="true"] {opacity:1}
.coll-modesw:not([aria-disabled="true"]):hover {border-color:var(--k-accent,var(--chsx-accent,#e8c547))}
.coll-modesw:focus-visible {outline:2px solid var(--k-accent,var(--chsx-accent,#e8c547));outline-offset:2px}
.coll-modes_note {margin:0;font-size:12px;line-height:1.35;opacity:.75}
.coll-modes_note[hidden] {display:none}
.coll-shelf .coll-shelf_row[hidden] {display:none}
html[data-chs-modes] .chsv-bar button.chsx-swbtn {display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;border-radius:6px;border:1px solid rgba(128,128,128,.55);background:transparent;color:inherit;font:600 12px/1 system-ui;cursor:pointer}
html[data-chs-modes]:not(#chs):not(#chm):not(#chn) :is([data-chs-mode="plain"],[data-chs-mode="tint"],[data-chs-mode="soft"],[data-chs-mode="accent"]) .hero-media_control {--_theme---text--heading:var(--_theme---controller--mode-card-heading)!important;--_theme---text--body:var(--_theme---controller--mode-card-body)!important;--_theme---text--muted:var(--_theme---controller--mode-card-muted)!important;--_theme---controller--src-muted:var(--_theme---controller--mode-card-muted)!important;--_theme---text--eyebrow:var(--_theme---controller--mode-card-eyebrow)!important;--_theme---controller--accent-ink:var(--_theme---controller--mode-card-eyebrow)!important;color:var(--_theme---controller--mode-card-body)}
html[data-chs-colors="roles"]:not(#chs):not(#chm):not(#chn) [data-chs-mode] .hero-media_control {--_theme---text--heading:var(--_theme---controller--mode-card-heading)!important;--_theme---text--body:var(--_theme---controller--mode-card-body)!important;--_theme---text--muted:var(--_theme---controller--mode-card-muted)!important;--_theme---controller--src-muted:var(--_theme---controller--mode-card-muted)!important;--_theme---text--eyebrow:var(--_theme---controller--mode-card-eyebrow)!important;--_theme---controller--accent-ink:var(--_theme---controller--mode-card-eyebrow)!important;color:var(--_theme---controller--mode-card-body);--_theme---link--primary:var(--chs-mode-card-link)!important}
/* Private link preview bar (moved from champs.css 2026-11-01: app UI, not design) */
[data-private-preview] { position:sticky; top:0; z-index:2147483600; padding:var(--_layout---spacing--small,1rem); background:var(--_theme---background--alternate,#f0eee8); color:var(--_theme---text--heading,#1c1f1e); }
/* Private link: the status cover and the Champs sign-in card (private-link.js). Goes into styles/controller.css, replacing
   champs.css lines 3-42 (the old html[data-private-link] page-level block, deleted). Single-class selectors only; the hidden
   attribute is handled by champs.css's [hidden] { display:none !important }. */

/* the page's section[data-private-link-status] while loading, failed, signing in or waiting for Build: a cover over the page */
.private-link_status { position:fixed; inset:0; z-index:2147483647; overflow:auto; visibility:visible; background:var(--_theme---background--primary,#ffffff); }
.private-link_status.is-signin { display:flex; min-height:100vh; min-height:100svh; align-items:center; justify-content:center; box-sizing:border-box; padding-block:2rem; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); background:#f8fafc; }

/* the sign-in card (Garrett 2026-10-21: "my mascot, my styling") */
.chs-signin { --chs-signin-primary:#005387; --chs-signin-primary-hover:#003d60; --chs-signin-ink:#0f172a; --chs-signin-muted:#64748b; --chs-signin-faint:#94a3b8; --chs-signin-line:#e2e8f0; --chs-signin-card:#ffffff; --chs-signin-danger:#dc2626; --chs-signin-shadow:rgba(15,23,42,.06); width:100%; max-width:24rem; display:flex; flex-direction:column; align-items:center; font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--chs-signin-ink); }
.chs-signin__mascot { display:block; width:9.5rem; max-width:60%; height:auto; margin:0 0 -1.15rem; position:relative; z-index:1; }
.chs-signin__card { width:100%; box-sizing:border-box; background:var(--chs-signin-card); border:1px solid var(--chs-signin-line); border-radius:.75rem; box-shadow:0 1px 2px var(--chs-signin-shadow); padding:2rem; text-align:center; }
.chs-signin__logo { display:block; height:2.25rem; width:auto; max-width:100%; margin:.5rem auto 1.25rem; }
.chs-signin__eyebrow { margin:0; font-size:.75rem; line-height:1.4; font-weight:500; letter-spacing:.02em; color:var(--chs-signin-faint); }
.chs-signin__title { margin:.25rem 0 0; font-family:inherit; font-size:1.125rem; line-height:1.35; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--chs-signin-primary); }
.chs-signin__lead { margin:.25rem 0 0; font-size:.875rem; line-height:1.45; color:var(--chs-signin-muted); }
.chs-signin__form { margin:1.5rem 0 0; display:grid; gap:1rem; text-align:left; }
.chs-signin__field { display:grid; gap:.375rem; margin:0; font-size:.875rem; line-height:1.4; font-weight:500; color:var(--chs-signin-ink); }
.chs-signin__input { box-sizing:border-box; width:100%; height:2.5rem; min-height:0; margin:0; padding:0 .75rem; border:1px solid var(--chs-signin-line); border-radius:.5rem; background:var(--chs-signin-card); color:var(--chs-signin-ink); font-family:inherit; font-size:.9375rem; font-weight:400; line-height:normal; box-shadow:none; }
.chs-signin__input:focus { outline:2px solid var(--chs-signin-primary); outline-offset:1px; border-color:transparent; }
.chs-signin__input.is-code { text-align:center; letter-spacing:.35em; text-transform:uppercase; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chs-signin__button { display:block; box-sizing:border-box; width:100%; height:2.5rem; margin:0; border:0; border-radius:.5rem; background:var(--chs-signin-primary); color:var(--chs-signin-card); font-family:inherit; font-size:.875rem; font-weight:600; line-height:1; cursor:pointer; }
.chs-signin__button:hover { background:var(--chs-signin-primary-hover); }
.chs-signin__button:disabled { opacity:.6; cursor:default; }
.chs-signin__note { margin:0; font-size:.75rem; line-height:1.4; color:var(--chs-signin-danger); }
.chs-signin__note.is-ok { color:var(--chs-signin-muted); }
.chs-signin__links { display:flex; justify-content:space-between; gap:.5rem; }
.chs-signin__link, .chs-signin__later { margin:0; padding:0; border:0; background:none; font-family:inherit; font-size:.75rem; color:var(--chs-signin-muted); cursor:pointer; }
.chs-signin__link:hover, .chs-signin__later:hover { color:var(--chs-signin-ink); }
.chs-signin__later { justify-self:center; }
/* ===== Guided setup (runtime/setup.js): the modal and the "Switched to" notice. Goes in styles/controller.css
   (it opens on business pages). Same looks as the old onboard.js block; previews read custom properties set by setup.js. ===== */
.chob{--ob-surface:#fff;--ob-ink:#1c1f1e;--ob-muted:#5c615e;--ob-line:#dcdcd6;--ob-input:#cfd2cf;--ob-side:#f3f1ea;--ob-dot:#d4d1c7;--ob-scrim:rgba(0,0,0,.45);--ob-soft:#f7f6f2;
  position:fixed;inset:0;z-index:2147483647;background:var(--ob-scrim);display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box;
  font:.8125rem/1.45 Inter,system-ui,sans-serif;color:var(--ob-ink);text-align:left}
.chob *{box-sizing:border-box}
.chob-setup{background:var(--ob-surface);border-radius:1.125rem;width:min(52rem,100%);height:min(42rem,calc(100dvh - 2rem));display:grid;grid-template-columns:13.75rem minmax(0,1fr);overflow:hidden;box-shadow:0 1.5rem 4rem rgba(0,0,0,.3)}
.chob-side{background:var(--ob-side);padding:1.375rem 1.125rem;display:grid;grid-template-rows:auto 1fr auto;align-items:center;gap:1rem}
.chob-bubble{background:var(--ob-surface);border-radius:.75rem;padding:.625rem .75rem;font-size:.8125rem;line-height:1.45;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chob-art{width:10.625rem;aspect-ratio:1/1;margin:0 auto;display:block;position:relative}
.chob-art img,.chob-art svg{width:100%;height:100%;object-fit:contain;display:block}
.chob-dots{display:flex;gap:.375rem;justify-content:center}
.chob-dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--ob-dot)}
.chob-dot.is-on{background:var(--ob-ink);width:1.375rem}
.chob-main{display:flex;flex-direction:column;min-height:0;padding:1.5rem 1.5rem 1.25rem;gap:.75rem}
.chob-main h3{outline:0;margin:0;font:600 1.3125rem/1.2 Inter,system-ui,sans-serif;color:var(--ob-ink);letter-spacing:0}
.chob-sub{margin:0;color:var(--ob-muted);font-size:.875rem}
.chob-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:.625rem;padding:.125rem .25rem .25rem .125rem;margin:0 -.25rem 0 -.125rem}
.chob-scroll>*{flex:none}
.chob-grp{font-size:.6875rem;font-weight:600;color:var(--ob-muted);text-transform:uppercase;letter-spacing:.07em;margin-top:.375rem}
.chob-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.chob-opt{border:1px solid var(--ob-line);border-radius:.75rem;padding:.625rem .75rem;background:var(--ob-surface);text-align:left;font:600 .8125rem/1.3 Inter,system-ui,sans-serif;color:var(--ob-ink);cursor:pointer;display:grid;gap:.375rem;align-content:start;min-width:0}
.chob-opt small{font-weight:400;color:var(--ob-muted);font-size:.75rem}
.chob-opt[aria-pressed="true"]{border-color:var(--ob-ink);box-shadow:0 0 0 1px var(--ob-ink)}
.chob-opt:focus-visible,.chob-acc:focus-visible,.chob-nav button:focus-visible,.chob-chip:focus-within,.chob-link:focus-visible{outline:2px solid var(--ob-ink);outline-offset:2px}
.chob-sw{display:inline-flex;gap:.1875rem}
.chob-sw i{width:.875rem;height:.875rem;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.15);background:var(--ob-swatch,transparent)}
.chob-in{border:1px solid var(--ob-input);border-radius:.5rem;padding:.625rem .75rem;font:.875rem Inter,system-ui,sans-serif;color:var(--ob-ink);background:var(--ob-surface);width:100%}
.chob-nav{display:flex;justify-content:space-between;align-items:center;gap:.625rem;padding-top:.25rem}
.chob-nav button{border-radius:999px;padding:.625rem 1.125rem;font:600 .875rem Inter,system-ui,sans-serif;cursor:pointer;border:1px solid var(--ob-input);background:transparent;color:var(--ob-ink)}
.chob-nav .next{background:var(--ob-ink);border-color:var(--ob-ink);color:var(--ob-surface)}
.chob-nav .next[disabled]{opacity:.4;cursor:default}
.chob-rec{border:1px solid var(--ob-line);border-radius:.875rem;padding:.875rem 1rem;display:grid;gap:.75rem;background:var(--ob-soft)}
.chob-rec-h{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font-size:.75rem;color:var(--ob-muted)}
.chob-rec-h b{color:var(--ob-ink);font-weight:600}
.chob-rec-g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,.8fr);gap:.875rem;align-items:end}
.chob-part{display:grid;gap:.375rem;min-width:0}
.chob-part>small{color:var(--ob-muted);font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chob-type{display:flex;align-items:flex-end;gap:.625rem;min-width:0}
.chob-type .aa{font-size:2.75rem;line-height:.9;color:var(--ob-ink)}
.chob-type span{display:grid;min-width:0}
.chob-type b{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chob-type em{font-style:normal;font-size:.75rem;color:var(--ob-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chob .aa,.chob-type b,.chob-type em,.chob-font b,.chob-font small{font-family:var(--ob-font,inherit)}
.chob-big{display:flex;gap:.25rem}
.chob-big i{width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:block;background:var(--ob-swatch,transparent)}
.chob-btn{display:inline-block;justify-self:start;padding:.4375rem .75rem;font-size:var(--ob-btn-size,.75rem);font-weight:600;line-height:1.2;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  border-radius:var(--ob-btn-radius,0);text-transform:var(--ob-btn-case,none);letter-spacing:var(--ob-btn-tracking,normal);font-family:var(--ob-btn-font,inherit);background:var(--ob-btn-bg,var(--ob-ink));color:var(--ob-btn-ink,#fff)}
.chob-corner{display:block;width:2.25rem;height:1.75rem;border:2px solid var(--ob-ink);border-right:0;border-bottom:0;border-radius:var(--ob-corner,0) 0 0 0}
.chob-link{justify-self:start;background:none;border:0;padding:0;color:var(--ob-ink);font:600 .75rem Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.chob-acc{display:flex;align-items:center;gap:.75rem;width:100%;border:1px solid var(--ob-line);border-radius:.625rem;padding:.6875rem .875rem;background:var(--ob-surface);color:var(--ob-ink);font:600 .8125rem Inter,system-ui,sans-serif;cursor:pointer;text-align:left;min-height:2.75rem}
.chob-acc em{font-style:normal;font-weight:500;color:var(--ob-muted);margin-left:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:.375rem}
.chob-acc>i{font-style:normal;color:var(--ob-muted);transition:transform .15s}
.chob-acc[aria-expanded="true"]{border-color:var(--ob-ink)}
.chob-acc[aria-expanded="true"]>i{transform:rotate(90deg)}
.chob-panel{display:grid;gap:.5rem;padding:.125rem 0 .375rem}
.chob-panel[hidden]{display:none}
.chob-logo{display:flex;align-items:center;gap:.75rem;border:1px solid var(--ob-line);border-radius:.625rem;padding:.5rem .875rem;min-height:2.75rem}
.chob-logo>span{display:grid;margin-right:auto;font-weight:600}
.chob-logo>span small{font-weight:400;color:var(--ob-muted);font-size:.6875rem}
.chob-logo .prev{height:2rem;max-width:8rem;display:flex;align-items:center;justify-content:center;background:var(--ob-soft);border-radius:.375rem;padding:.125rem .375rem}
.chob-logo .prev img{max-height:1.75rem;max-width:7.25rem;width:auto;height:auto;display:block}
.chob-logo .prev.dark{background:var(--ob-ink)}
.chob-logo.sub{margin-top:-.25rem}
.chob-chip{border:1px solid var(--ob-input);border-radius:999px;padding:.4375rem .875rem;font:600 .75rem Inter,system-ui,sans-serif;cursor:pointer;background:var(--ob-surface);color:var(--ob-ink);white-space:nowrap}
.chob-chip.go{background:var(--ob-ink);border-color:var(--ob-ink);color:var(--ob-surface)}
.chob-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.chob-color{display:flex;align-items:center;gap:.5rem;border:1px solid var(--ob-line);border-radius:.625rem;padding:.4375rem .625rem;cursor:pointer;font-weight:600}
.chob-color input{width:1.875rem;height:1.875rem;border:0;padding:0;background:none;cursor:pointer;flex:none}
.chob-font .aa{font-size:1.625rem;line-height:1;font-weight:400}
.chob-font b{font-weight:600;font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chob-font small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chob-bprev{display:flex;align-items:center;min-height:2.25rem}
.chob-tag{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ob-muted)}
.chob-note{position:fixed;left:1rem;bottom:1rem;z-index:2147483600;display:flex;align-items:center;gap:.75rem;max-width:calc(100vw - 2rem);background:#fff;color:#1c1f1e;border-radius:.75rem;padding:.625rem .875rem;font:.8125rem/1.4 Inter,system-ui,sans-serif;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.2)}
.chob-note .chob-link{flex:none}
@media (max-width:991px){.chob-setup{width:min(46rem,100%)}.chob-side{grid-template-columns:none}.chob-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.chob{padding:.5rem}.chob-setup{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - 1rem)}
  .chob-side{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem}.chob-art{width:3.5rem;margin:0;order:-1;flex:none}.chob-bubble{flex:1}.chob-dots{display:none}
  .chob-main{padding:1rem 1rem .875rem}.chob-main h3{font-size:1.125rem}.chob-sub{font-size:.8125rem}
  .chob-rec-g{grid-template-columns:repeat(3,minmax(0,1fr))}.chob-rec-g>.chob-part:first-child{grid-column:1/-1}.chob-colors{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.chob-opt{padding:.5625rem .625rem}.chob-logo{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.chob-acc>i{transition:none}}
/* ===== Part A: add to styles/controller.css (every page loads it: the how-to player opens on the explorer too) =====
   Was injected by howto.js as <style id="chht-styles">. Same values; the bare-tag rules now sit on classes. */
.chht { --ht-surface: #fff; --ht-ink: #1c1f1e; --ht-line: #cfd2cf; --ht-frame: #15212b; --ht-scrim: rgba(0,0,0,.6); --ht-shadow: 0 1.5rem 4rem rgba(0,0,0,.3);
  position: fixed; inset: 0; z-index: 2147483647; background: var(--ht-scrim); display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box;
  font: .875rem/1.45 Inter, system-ui, sans-serif; color: var(--ht-ink); text-align: left; }
.chht-box { box-sizing: border-box; background: var(--ht-surface); border-radius: 1.125rem; width: min(64rem, 100%, calc((100dvh - 7.25rem) * 1.44 + 2rem)); padding: 1rem; display: grid; gap: .75rem; box-shadow: var(--ht-shadow); }
.chht-head { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.chht-title { box-sizing: border-box; margin: 0; font: 600 1.0625rem/1.25 Inter, system-ui, sans-serif; color: var(--ht-ink); letter-spacing: 0; }
.chht-close { box-sizing: border-box; border-radius: 999px; padding: .5rem 1rem; font: 600 .8125rem Inter, system-ui, sans-serif; cursor: pointer; border: 1px solid var(--ht-line); background: transparent; color: var(--ht-ink); }
.chht-close:focus-visible { outline: 2px solid var(--ht-ink); outline-offset: 2px; }
.chht-video { box-sizing: border-box; display: block; width: 100%; height: auto; aspect-ratio: 1440 / 1000; border-radius: .625rem; background: var(--ht-frame); }
@media (max-width: 767px) { .chht { padding: .5rem; } .chht-box { padding: .75rem; border-radius: 1rem; } }
/* the controller's play button (old selector .chd.cdc .cdc-h .chsx-howtolink; main: match the panel's own specificity if .cdc-link wins) */
.chsx-howtolink { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; min-width: 0; min-height: 0; padding: 0; border-radius: 999px; flex: none; }
.chsx-howtolink svg { width: .875rem; height: .875rem; display: block; }
/* ---------- The saved page, /saved (saved.js): header, groups, item bars, remove, mode swatch, empty state, print ---------- */
/* Merge into styles/controller.css (explorer UI). Same looks as the old injected block; the old html[data-chsv] rules that hid
   the composed source page are gone (designs are copied from their served pages now, there is no source page). */
.chsv-page{--chsv-bg:#f6f7f5;--chsv-ink:#151716;--chsv-muted:#5d625f;--chsv-line:#dfe2df;--chsv-card:#ffffff;--chsv-accent:#e8c547;--chsv-heart:#e5484d;--chsv-heart-soft:#fdecec;background:var(--chsv-bg);color:var(--chsv-ink);min-height:100vh;display:block}
.chsv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:56px 40px 32px;border-bottom:1px solid var(--chsv-line);font-family:Inter,system-ui,sans-serif}
.chsv-head small{display:block;font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--chsv-muted);margin-bottom:12px}
.chsv-head h1{margin:0;font:700 40px/1.1 Inter,system-ui,sans-serif;color:var(--chsv-ink)}
.chsv-head p{margin:10px 0 0;font:400 16px/1.5 Inter,system-ui,sans-serif;color:var(--chsv-muted)}
.chsv-link{display:inline-block;border:1px solid var(--chsv-ink);color:var(--chsv-ink);background:transparent;cursor:pointer;border-radius:999px;padding:10px 18px;font:600 14px/1 Inter,system-ui,sans-serif;text-decoration:none}
.chsv-link:hover{background:var(--chsv-ink);color:var(--chsv-bg)}
.chsv-link.is-solid{background:var(--chsv-ink);color:var(--chsv-bg)}
.chsv-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chsv-return{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 16px;border:1px solid var(--chsv-line);border-radius:12px;background:var(--chsv-card);font:400 14px/1.4 Inter,system-ui,sans-serif}
.chsv-return span{font-weight:600}
.chsv-return input{flex:1 1 18rem;min-width:0;border:1px solid var(--chsv-line);border-radius:8px;padding:9px 12px;font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--chsv-ink);background:var(--chsv-bg)}
.chsv-return small{flex-basis:100%;margin:0;color:var(--chsv-muted);font:400 13px/1.4 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none}
.chsv-type{margin:0;padding:40px 40px 14px;font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--chsv-ink);display:flex;gap:10px;align-items:center}
.chsv-type span{font-weight:500;color:var(--chsv-muted)}
.chsv-item{border-top:1px solid var(--chsv-line);background:var(--chsv-card)}
.chsv-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 40px;background:var(--chsv-bg);border-bottom:1px solid var(--chsv-line);font:600 12px/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--chsv-ink)}
.chsv-bar span{margin-right:auto}
.chsv-heart{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--chsv-heart);background:var(--chsv-heart-soft);color:var(--chsv-heart);border-radius:999px;padding:7px 12px;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer}
.chsv-heart:hover{background:var(--chsv-heart);color:var(--chsv-card)}
/* the design box: a fixed or sticky bar (navigation) sits in its own row in the stack (a transform makes this box its containing block) */
.chsv-design{position:relative;overflow:hidden;transform:translateZ(0)}
.chsv-note{padding:24px 40px;font:400 15px/1.5 Inter,system-ui,sans-serif;color:var(--chsv-muted)}
.chsv-empty{padding:96px 40px;text-align:center;font-family:Inter,system-ui,sans-serif}
.chsv-empty p{margin:0 0 20px;font:400 18px/1.5 Inter,system-ui,sans-serif;color:var(--chsv-muted)}
@media (max-width:767px){
  .chsv-head{padding:36px 20px 24px}
  .chsv-head h1{font-size:30px}
  .chsv-type,.chsv-bar,.chsv-note{padding-left:20px;padding-right:20px}
}
/* Download PDF = print: the saved designs as they look, nothing of the explorer, colors and backgrounds kept */
@media print{
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:1440px 1920px;margin:24px}   /* a desktop-width page, so designs print as they look on screen */
  html,body{background:#fff}
  #chb,.cdc-shelf,.chsx-rail,.chsx-hc,.chsx-qcdock,.chsqc-btn,.chsqc-list,.chsqc-bar,.chsqc-box,.chtr,.chob,.chob-note,.chpl,.chplan-identity,.chplan-notice,#chs-loader,[data-champs-widget],[data-cookie-settings-host],.chsv-acts,.chsv-return,.chsv-heart,.chsv-mode,.chsv-empty .chsv-link{display:none}
  .chsv-head{padding:0 0 12px;border:0}
  .chsv-type,.chsv-bar{break-after:avoid}
  .chsv-item{break-inside:auto}
  .chsv-design{break-inside:avoid}
}
/* ===== Plans (runtime/plan.js): the "Save your favorites" ask, the status notices, the homepage plan list =====
   Merge into styles/controller.css, replacing the old block: .chplan-notice, .chplan-list, .chplan-item (and its p / a /
   button descendants), .chplan-actions, .chplan-identity (the old identity dialog is gone: plan.js has one ask). Every rule
   is a single class (or a class plus its own state); the old inline <style> of plan.js and the style.cssText notice
   of design-plan-sync.js live here now, values unchanged. */

/* the ask: scrim, card, fields, buttons (was the injected .chpl <style>) */
.chpl{--pl-surface:#fff;--pl-ink:#1c1f1e;--pl-muted:#5c615e;--pl-line:#cfd2cf;--pl-scrim:rgba(0,0,0,.45);position:fixed;inset:0;z-index:2147483647;background:var(--pl-scrim);display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box;font:.875rem/1.45 Inter,system-ui,sans-serif;color:var(--pl-ink)}
.chpl-form{box-sizing:border-box;background:var(--pl-surface);border-radius:1.125rem;width:min(28rem,100%);padding:1.5rem;display:grid;gap:.875rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.3)}
.chpl-title{margin:0;font:600 1.3125rem/1.2 Inter,system-ui,sans-serif;color:var(--pl-ink)}
.chpl-text{margin:0;color:var(--pl-muted)}
.chpl-label{box-sizing:border-box;display:grid;gap:.375rem;font-weight:600;font-size:.8125rem}
.chpl-input{box-sizing:border-box;border:1px solid var(--pl-line);border-radius:.5rem;padding:.625rem .75rem;font:.875rem Inter,system-ui,sans-serif;color:var(--pl-ink);background:var(--pl-surface);width:100%}
.chpl-alert{margin:0;color:#b42318;font-size:.8125rem}
.chpl-alert[hidden]{display:none}
.chpl-row{display:flex;justify-content:space-between;align-items:center;gap:.625rem;margin-top:.25rem}
.chpl-button{box-sizing:border-box;border-radius:999px;padding:.625rem 1.125rem;font:600 .875rem Inter,system-ui,sans-serif;cursor:pointer;border:1px solid var(--pl-line);background:transparent;color:var(--pl-ink)}
.chpl-button.is-go{background:var(--pl-ink);border-color:var(--pl-ink);color:var(--pl-surface)}
.chpl-button:disabled{opacity:.5;cursor:default}

/* the short notice after a heart ("Saved to your design plan.") */
.chplan-notice{position:fixed;bottom:24px;left:24px;z-index:10001;max-width:min(480px,calc(100vw - 48px));padding:14px 20px;border-radius:10px;background:#143b55;color:white;font:15px/1.5 Inter,Arial,sans-serif;box-shadow:0 8px 24px #0002}
.chplan-notice[hidden]{display:none}

/* the notice that stays while an HQ save has not gone through (was style.cssText in design-plan-sync.js) */
.chplan-unsaved{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:2147483000;margin:0;padding:8px 12px;border-radius:8px;background:#1f2937;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);max-width:calc(100vw - 32px)}
.chplan-unsaved[hidden]{display:none}

/* the delivery error above Send my picks (a text-size-small line, as before; no extra look) */
.chplan-error{margin:0 0 8px}

/* the homepage plan list and actions */
.chplan-list{max-width:960px;margin:0 auto 32px}
.chplan-item{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid #d8e4ed}
.chplan-item-meta{margin:6px 0}
.chplan-item-link{color:#005580;text-decoration:underline}
.chplan-item-remove{border:1px solid #d8e4ed;padding:8px 12px;background:transparent;border-radius:6px;color:#143b55;cursor:pointer}
.chplan-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

@media (max-width:767px){
  .chplan-item{align-items:start;gap:12px}
  .chplan-item-remove{flex:none}
  .chplan-notice{left:16px;bottom:16px}
}
@media (max-width:479px){
  .chpl-form{padding:1.125rem}
}
/* ===== QC flags (public/runtime/qc.js, rebuilt 2026-11-01; from qc.js's injected style + sidecar.js's QC rules) =====
   Only drawn with ?qc=1. Geometry comes from --qc-x / --qc-y / --qc-w / --qc-h set by qc.js. Replaces the old
   ".chsx-qcdock / .chsqc-btn" rules near the end of controller.css (mobile hide and lightbox hide are restated here). */
.chsqc-btn{position:relative;font:600 12px/1 system-ui,sans-serif;padding:9px 12px;border-radius:999px;border:1px solid #1d2a4a;background:#fff;color:#1d2a4a;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.15);white-space:nowrap}
.chsqc-btn.is-on{background:#1d2a4a;color:#fff}
.chsqc-count{margin-left:6px;background:#e5484d;color:#fff;border-radius:999px;padding:2px 6px;font-size:11px}
/* the dock: the pills while the panel is closed (or on pages without it), middle of the left edge */
.chsx-qcdock{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:2147483600;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.chsx-qcdock:empty{display:none}
@media(max-width:767px){.chsx-qcdock{display:none}}
html.detail_lb-open .chsx-qcdock{visibility:hidden}
/* in the panel header: QC, QC list, minimize share one 26px height and 6px gaps */
.chd.cdc .chsx-qc .chsqc-btn{height:26px;padding:0 10px;font-size:11px;border-radius:999px;background:transparent;color:var(--k-ink,var(--chsx-ink));
  border:1px solid var(--k-line,var(--chsx-line2));display:inline-flex;align-items:center;line-height:1;box-sizing:border-box;box-shadow:none}
.chd.cdc .chsx-qc .chsqc-btn.is-on{background:var(--k-accent,var(--chsx-accent));color:var(--chsx-on-accent);border-color:transparent}
.chd.cdc .chsx-qc .chsqc-btn:hover{border-color:var(--k-accent,var(--chsx-accent))}
/* QC on: the outline over the hovered design, crosshair while over one */
html[data-qc-on][data-qc-hovering]{cursor:crosshair}
.chsqc-hover{position:absolute;left:var(--qc-x);top:var(--qc-y);width:var(--qc-w);height:var(--qc-h);box-sizing:border-box;border:3px solid #3e63dd;z-index:2147483599;pointer-events:none}
.chsqc-hover[hidden]{display:none}
/* the tag bar */
.chsqc-bar{position:absolute;left:var(--qc-x);top:var(--qc-y);z-index:2147483601;display:flex;flex-wrap:wrap;gap:6px;max-width:520px;padding:10px;background:#0f172a;border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);font:500 12px/1 system-ui,sans-serif}
.chsqc-bar.is-drawing{pointer-events:none;opacity:.4}
/* phones: the QC tags sit at the bottom of the screen, so the design and its controls stay visible above them */
@media (max-width:767px){.chsqc-bar{position:fixed;left:8px;right:8px;top:auto;bottom:8px;max-width:none;max-height:45vh;overflow:auto}}
.chsqc-bar button{all:unset;cursor:pointer;padding:7px 10px;border-radius:7px;background:#1e293b;color:#e2e8f0}
.chsqc-bar button.is-sel{background:#e5484d;color:#fff}
.chsqc-bar .chsqc-title{width:100%;color:#94a3b8;font-size:11px;margin-bottom:2px}
.chsqc-bar .chsqc-save{background:#22c55e;color:#04210f;font-weight:700}
.chsqc-quick{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.chsqc-note{width:100%;font:inherit;padding:8px;border-radius:6px;box-sizing:border-box;color:#0f172a;background:#fff}
.chsqc-status{width:100%;margin:0;color:#e2e8f0}
/* boxes */
.chsqc-box{position:absolute;left:var(--qc-x);top:var(--qc-y);width:var(--qc-w);height:var(--qc-h);border:2px solid #e5484d;background:rgba(229,72,77,.12);z-index:2147483599;pointer-events:none}
.chsqc-box.is-draft{border-style:dashed}
.chsqc-box[hidden]{display:none}
/* the flags list (also the save toast) */
.chsqc-list{position:fixed;left:12px;bottom:52px;z-index:2147483600;width:340px;max-width:calc(100vw - 24px);max-height:50vh;overflow:auto;overflow-x:hidden;box-sizing:border-box;
  background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font:12px/1.4 system-ui,sans-serif;color:#0f172a;box-shadow:0 8px 30px rgba(0,0,0,.2);overflow-wrap:anywhere}
.chsqc-list li{margin:0 0 6px}
.chsqc-list button{font:inherit;cursor:pointer}
.chsqc-items{padding-left:18px}
.chsqc-clear{margin-left:8px}
/* the controller's hover Flag / Delete buttons */
.chsx-hc .chsx-trash:hover{border-color:#e5484d;color:#e5484d}
.chsx-hc button.is-done{border-color:#2fb36a;color:#2fb36a}
.chsx-hc button.is-fail{border-color:#e5484d;color:#e5484d}
/* First-run tour (runtime/tour.js): the overlay, spotlight ring, popover / phone sheet, and the panel's "Take the tour" link.
   Positions come from custom properties tour.js sets at run time (--chtr-x, --chtr-y, --chtr-w, --chtr-h). */
.chtr{--tr-surface:#fff;--tr-ink:#1c1f1e;--tr-muted:#5c615e;--tr-line:#cfd2cf;--tr-ring:#e8c547;--tr-scrim:rgba(0,0,0,.55);font:.8125rem/1.45 Inter,system-ui,sans-serif;color:var(--tr-ink)}
.chtr-block{position:fixed;inset:0;z-index:2147483647;background:transparent}
.chtr-spot{position:fixed;z-index:2147483647;left:var(--chtr-x,50%);top:var(--chtr-y,50%);width:var(--chtr-w,0);height:var(--chtr-h,0);border-radius:.625rem;box-shadow:0 0 0 200vmax var(--tr-scrim);outline:2px solid var(--tr-ring);outline-offset:2px;pointer-events:none;transition:all .2s ease}
.chtr-spot.is-none{left:50%;top:50%;width:0;height:0;outline:0}
.chtr-pop{position:fixed;z-index:2147483647;left:var(--chtr-x,50%);top:var(--chtr-y,50%);width:min(19rem,calc(100vw - 2rem));background:var(--tr-surface);border-radius:.875rem;padding:1rem 1rem .875rem;box-shadow:0 1rem 2.5rem rgba(0,0,0,.3);display:grid;gap:.5rem;box-sizing:border-box}
.chtr-pop.is-measuring{visibility:hidden}
.chtr-title{margin:0;font:600 .9375rem/1.25 Inter,system-ui,sans-serif;color:var(--tr-ink);letter-spacing:0}
.chtr-text{margin:0;color:var(--tr-ink);font-size:.8125rem;line-height:1.5}
.chtr-foot{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}
.chtr-n{color:var(--tr-muted);font-size:.75rem;margin-right:auto}
.chtr-btn{border-radius:999px;padding:.4375rem .875rem;font:600 .75rem Inter,system-ui,sans-serif;cursor:pointer;border:1px solid var(--tr-line);background:transparent;color:var(--tr-ink)}
.chtr-btn.is-go{background:var(--tr-ink);border-color:var(--tr-ink);color:var(--tr-surface)}
.chtr-btn.is-skip{border:0;padding-left:0;padding-right:.25rem;text-decoration:underline;color:var(--tr-muted)}
.chtr-btn:focus-visible{outline:2px solid var(--tr-ink);outline-offset:2px}
@media (max-width:767px){
  .chtr-pop{left:.5rem;right:.5rem;width:auto;border-radius:1rem;padding:1rem}
  .chtr-pop.is-bottom{top:auto;bottom:.5rem}
  .chtr-pop.is-top{bottom:auto;top:.5rem}
}
@media (prefers-reduced-motion:reduce){.chtr-spot{transition:none}}
/* "Take the tour" in the panel header */
.chsx-tourlink{justify-self:start;min-height:0;padding:2px;background:none;border:0;color:var(--k-accent,var(--chsx-accent));font:500 12px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
/* ===== Built-in features (public/runtime/features.js, from champsfeatcss1/2 2026-11-01): the demo windows, the tracking card,
   the Features shelf list, a client's picks. Old rules verbatim except: the state class .z is now .is-collapsed, the shelf list
   shows as grid by its own rule (the old script set display inline), and the @import of Inter is dropped (an @import cannot sit
   mid-file; the controller already loads Inter). The picks rules are new: their old CSS lived in the retired .chp panel. ===== */

/* the demos' boxes on the page */
.fx{position:fixed;z-index:99990;text-align:left;letter-spacing:0;text-transform:none}
.fx *{box-sizing:border-box}
/* a centered window (booking, lead form) over a dim backdrop */
.fx-m{inset:0;z-index:99998;background:rgba(15,23,42,.45);display:flex;justify-content:center;align-items:flex-start;padding:60px 16px 16px;overflow:auto}
.fx-w{position:relative;width:480px;max-width:100%;margin:auto 0}
.fx-wb{width:720px}
.fx-w>.fx-x{position:absolute;right:0;top:-46px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#0f172a;font:400 24px/36px sans-serif;padding:0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* the tracking card, top right */
.fx-tr{top:96px;right:16px;width:330px;max-width:calc(100vw - 32px);background:#f9f9f9;border-radius:8px;box-shadow:0 0 0 1px #e5e7eb,0 8px 24px rgba(15,23,42,.14);font:14px/1.43 Inter,system-ui,sans-serif;color:#353840}
.ft-h{display:flex;align-items:center;gap:8px;padding:16px 16px 12px;cursor:pointer}
.ft-h b{flex:1;font-size:16px;font-weight:600;line-height:32px;letter-spacing:-.01em}
.ft-x{width:32px;height:32px;margin-right:-6px;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:none;color:#6b7280;cursor:pointer;padding:0}
.ft-x:hover{background:#eef0f3;color:#353840}
.ft-b{padding:8px 16px 16px}
.ft-b p{margin:0 0 8px;font-size:12px;color:#6b7280}
.ft-r{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;padding:2px 0}
.ft-r span{flex:none;color:#6b7280}
.ft-r b{min-width:0;font-weight:500;text-align:right;overflow-wrap:anywhere}
.fx-tr label{display:block;margin:12px 0 6px;font-size:14px;font-weight:500;line-height:1}
.fx-tr ul{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #e5e7eb;border-radius:6px;max-height:168px;overflow:auto}
.fx-tr li{padding:6px 10px;font-size:12px;border-top:1px solid #e5e7eb}
.fx-tr li:first-child{border-top:0}
.fx-tr li i{font-style:normal;color:#6b7280;margin-right:6px}
.fx-tr.is-collapsed .ft-b{display:none}

/* the Features shelf: the checkbox list */
.chf{display:grid;gap:8px;max-width:560px}
.chf p{margin:0;opacity:.85}
.chf label{display:flex;gap:8px;cursor:pointer;align-items:flex-start;font-weight:400;opacity:.75;margin:0}
.chf input{margin:2px 0 0;accent-color:#fff}
.chf i{font-style:normal;font-weight:700}
.chf small{opacity:.55}

/* a client's picks: YOUR PICKS in the panel, and love / not for me / note on the hover controls (controller tokens) */
.chpk{display:grid;gap:8px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--k-line);color:var(--k-ink);font:13px/1.4 Inter,system-ui,sans-serif}
.chpk b{font-size:11px;letter-spacing:.08em;color:var(--k-muted)}
.chpk small{color:var(--k-muted)}
.chp-row{display:flex;flex-wrap:wrap;gap:6px}
.chp-b{border:1px solid var(--k-line);border-radius:999px;background:var(--k-panel2);color:var(--k-ink);font:500 12px/1 Inter,system-ui,sans-serif;padding:8px 12px;cursor:pointer}
.chp-b.is-current{border-color:var(--k-accent);color:var(--k-accent)}
.chp-b.chpk-send{background:var(--k-accent);border-color:var(--k-accent);color:#151716}
.chpk-list{display:grid;gap:4px;max-height:200px;overflow:auto;font-size:12px}
.chpk-list button{border:0;background:none;color:var(--k-muted);cursor:pointer;padding:0 4px}
[data-ftp-bar]{display:inline-flex;gap:4px}
[data-ftp-bar][hidden]{display:none}
[data-ftp-bar] button{border:0;background:none;color:inherit;font:16px/1 sans-serif;padding:6px;cursor:pointer;opacity:.7}
[data-ftp-bar] button.is-on{opacity:1;color:var(--chsx-heart)}
/* offers.js: merge into styles/controller.css. The chm-modal block replaces the :is(...[data-chs-v]) chm-modal rules
   now at controller.css lines 240-255 (same values, plain selectors). Values copied from the old design-controller.js. */

/* signed-in line under the controller title */
.chd.cdc .cdc-who{margin:0;color:var(--k-muted);font-size:.75rem;line-height:1.4;overflow-wrap:anywhere}
.chd.cdc .cdc-who[hidden]{display:none}
.chd.cdc .cdc-quiet{background:none;border:0;padding:0;margin:0;color:var(--k-muted);font:inherit;text-decoration:underline;cursor:pointer}
.chd.cdc .cdc-quiet:hover{color:var(--k-ink)}

/* footer: Book a meeting and the $500 countdown under it */
.chd.cdc .cdc-foot .cdc-bookcta{grid-column:1/-1;font-weight:600;background:var(--k-accent);color:#151716;border-color:var(--k-accent)}
.chd.cdc .cdc-foot>.cdc-offer{grid-column:1/-1;gap:.5rem;height:auto;min-height:2rem;padding:.375rem .75rem;border:1px solid var(--k-accent);border-radius:.625rem;background:color-mix(in srgb,var(--k-accent) 16%,var(--k-panel));color:var(--k-accent);font:600 .8125rem/1.25 Inter,system-ui,sans-serif;cursor:default;justify-content:center}
.chd.cdc .cdc-offer__time{font-variant-numeric:tabular-nums;font-size:.9375rem;font-weight:700}
/* last, so a hidden footer item stays hidden over .cdc-foot>* display:flex (no !important needed) */
.chd.cdc .cdc-foot>[hidden]{display:none}
.chd.cdc .cdc-foot>.chsb-foot:empty{display:none}   /* Build's footer slots stay out until build.js fills them (client links) */

/* the $500 offer modal */
.chm-modal{--chm-surface:#ffffff;--chm-ink:#0f172a;--chm-muted:#64748b;--chm-primary:#005387;--chm-primary-hover:#003d60;--chm-on-primary:#ffffff;--chm-line:#e2e8f0;--chm-chip:#e8f1f7;--chm-scrim:rgb(15 23 42 / .6);width:min(30rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem);margin:auto;padding:0;border:0;border-radius:1rem;background:var(--chm-surface);color:var(--chm-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-shadow:0 1.5rem 3rem var(--chm-scrim)}
.chm-modal::backdrop{background:var(--chm-scrim)}
.chm-modal .chm-modal__card{display:grid;gap:1rem;padding:2rem}
.chm-modal .chm-modal__time{justify-self:start;margin:0;padding:.25rem .75rem;border-radius:62.5rem;background:var(--chm-chip);color:var(--chm-primary);font-size:.8125rem;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums}
.chm-modal .chm-modal__title{margin:0;font:700 1.625rem/1.2 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--chm-ink)}
.chm-modal .chm-modal__text{margin:0;font-size:1rem;line-height:1.5;color:var(--chm-muted)}
.chm-modal .chm-modal__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.chm-modal .button{white-space:nowrap;flex:1 1 12rem;justify-content:center;text-align:center;border:1px solid var(--chm-primary);background:var(--chm-primary);color:var(--chm-on-primary)}
.chm-modal .button:hover{background:var(--chm-primary-hover);border-color:var(--chm-primary-hover);color:var(--chm-on-primary)}
.chm-modal .button.is-secondary{background:transparent;color:var(--chm-primary)}
.chm-modal .button.is-secondary:hover{background:var(--chm-chip);color:var(--chm-primary)}
@media (max-width:479px){
  .chm-modal .chm-modal__card{padding:1.5rem}
  .chm-modal .chm-modal__title{font-size:1.375rem}
  .chm-modal .chm-modal__actions{flex-direction:column}
  .chm-modal .button{flex-basis:auto;width:100%}
}
/* Section galleries (gallery.js): the toolbar, the style badge, Save to plan, the notes. Merge into styles/controller.css,
   replacing the old :is(.chlib-...) rules (lines with chlib-toolbar, chlib-fit, chlib-sample-note). */
.chlib-toolbar {display:flex;align-items:start;flex-wrap:wrap;gap:20px;padding:20px 24px;background:#f3f8fc;border:1px solid #d8e4ed;border-radius:8px;margin:0 0 28px;color:#143b55}
.chlib-field {flex:1 1 220px;font:500 14px/1.5 Inter,Arial,sans-serif}
.chlib-select {display:block;margin-top:6px}
.chlib-hint {flex-basis:100%;font:14px/1.5 Inter,Arial,sans-serif;margin:0}
.chlib-fit {font:12px/1.5 Inter,Arial,sans-serif;opacity:.7}
.chlib-save {border:1px solid #d8e4ed;padding:8px 12px;background:transparent;border-radius:6px;color:#143b55;font:500 13px/1.2 Inter,Arial,sans-serif;cursor:pointer}
.chlib-save.is-saved {background:#143b55;border-color:#143b55;color:#fff}
.chlib-sample-note {padding:12px 20px;margin:0;font:14px Inter,Arial,sans-serif;background:#f3f8fc;color:#143b55}
.chlib-status {margin:12px 0 0;font:14px/1.5 Inter,Arial,sans-serif;color:#143b55}
@media (max-width:767px) {
  .chlib-toolbar {padding:16px}
}

/* Build mode (build.js), for main to merge into styles/controller.css. The old build.js injected these as a <style>; same looks,
   now keyed on Build's own classes and its state attributes on <html>: data-chsb (explore | build | champs), data-chsb-busy,
   data-chsb-pending, data-chsb-framed, data-chsb-comparing, data-chsb-dragging. States on Build's own elements are is- classes. */

/* Build hides the controller's phase-one parts: Sections here, the page picker, the hover heart, the business row, Style, Saved, Send */
html[data-chsb="build"] .chd.cdc [data-cdc-sections],html[data-chsb="build"] .chd.cdc [data-cdc-open="page"],html[data-chsb="build"] [data-cdc-hc] [data-cdc-act="heart"]{display:none}
html[data-chsb] [data-chm-bar],html[data-chsb] .chd.cdc [data-cdc-bizrow],html[data-chsb] .chd.cdc [data-cdc-style]{display:none}
html[data-chsb="build"] [data-cdc-foot]>[data-cdc-open="saved"],html[data-chsb="build"] [data-cdc-foot]>[data-cdc-send]{display:none}
html[data-chsb="build"] [data-cdc-foot]>[data-cdc-open="features"]{grid-column:1/-1}

/* panel blocks */
.chsb{display:grid;gap:8px;margin:10px 0;font:500 12.5px/1.3 Inter,system-ui,sans-serif;color:var(--k-ink,#f2f3f1)}
.chsb:empty{display:none}
.chsb-seg{display:inline-flex;border:1px solid var(--k-line,#3a3d3b);border-radius:999px;padding:2px;gap:2px}
.chsb-seg button{border:0;background:none;color:var(--k-muted,#9aa09c);font:600 12px/1 Inter,system-ui,sans-serif;padding:7px 12px;border-radius:999px;cursor:pointer;text-decoration:none}
.chsb-seg button[aria-current="true"]{background:var(--k-accent,#e8c547);color:#151716}
.chsb-box{background:var(--k-panel2,#232624);border-radius:10px;padding:10px;display:grid;gap:8px}
.chsb-box h4{margin:0;font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--k-muted,#9aa09c)}
.chsb-line{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chsb-btn{border:1px solid var(--k-line,#3a3d3b);background:var(--k-panel,#1c1f1e);color:var(--k-ink,#f2f3f1);border-radius:999px;padding:6px 10px;font:500 12px/1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.chsb-btn:hover{border-color:var(--k-accent,#e8c547)}
.chsb-btn.is-primary{background:var(--k-accent,#e8c547);color:#151716;border-color:transparent}
.chsb-btn[disabled]{opacity:.4;cursor:default}
.chsb-btn.chsb-cta{font-weight:600}
.chsb-chips{display:flex;flex-wrap:wrap;gap:6px}
.chsb-chip{border:1px solid var(--k-line,#3a3d3b);background:none;color:var(--k-ink,#f2f3f1);border-radius:7px;padding:5px 8px;font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer}
.chsb-chip[aria-pressed="true"]{border-color:var(--k-accent,#e8c547);color:var(--k-accent,#e8c547)}
.chsb-note{color:var(--k-muted,#9aa09c);font:400 11.5px/1.4 Inter,system-ui,sans-serif;margin:0}
.chsb-note[hidden]{display:none}
.chsb-over{color:#f0a35e}

/* the section rows */
.chsb-secs{max-height:300px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;display:grid;gap:4px}
.chsb-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:6px;align-items:center;padding:5px 6px 5px 2px;border-radius:8px}
.chsb-row.is-current{background:var(--k-panel,#1c1f1e)}
.chsb-row.is-dragging{opacity:.45}
.chsb-row.is-drop-before{box-shadow:inset 0 2px 0 var(--k-accent,#e8c547)}
.chsb-row.is-drop-after{box-shadow:inset 0 -2px 0 var(--k-accent,#e8c547)}
html[data-chsb-dragging],html[data-chsb-dragging] *{cursor:grabbing}
.chsb-row b{font-weight:500;cursor:pointer;display:block}
.chsb-row small{display:block;color:var(--k-muted,#9aa09c);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chsb-grip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:26px;color:var(--k-muted,#9aa09c);cursor:grab;touch-action:none;user-select:none}
.chsb-grip:hover{color:var(--k-ink,#f2f3f1)}
.chsb-grip svg{width:10px;height:14px;pointer-events:none}
.chsb-grip.is-fixed{cursor:default}
.chsb-sug{color:var(--k-accent,#e8c547);font-weight:600}
.chsb-unsug{border:0;background:none;color:var(--k-muted,#9aa09c);font:600 12px/1 Inter,system-ui,sans-serif;padding:0 2px;cursor:pointer}
.chsb-unsug:hover{color:var(--k-ink,#f2f3f1)}
.chsb-tools{display:inline-flex;gap:3px}
.chsb-tools button{width:26px;height:26px;border-radius:7px;border:1px solid var(--k-line,#3a3d3b);background:var(--k-panel,#1c1f1e);color:var(--k-ink,#f2f3f1);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;font:600 12px/1 Inter,system-ui,sans-serif}
.chsb-tools button:hover{border-color:var(--k-accent,#e8c547)}
.chsb-tools button[disabled]{opacity:.35;cursor:default}
.chsb-tools button[hidden]{display:none}
.chsb-tools svg{width:16px;height:16px;display:block;pointer-events:none}
.chsb-mode{width:auto;min-width:26px;padding:0 4px;gap:3px;font:600 11px/1 Inter,system-ui,sans-serif}
.chsb-mode i{width:10px;height:10px;border-radius:3px;border:1px solid rgba(255,255,255,.35);background:var(--chsx-swatch,transparent)}
.chsb-add{border:1px dashed var(--k-line,#3a3d3b);background:none;color:var(--k-accent,#e8c547);border-radius:8px;padding:8px;font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer}

/* Build in the controller's bottom stack: design picker row, Compare, Features, the gold choose button */
.chsb-foot{grid-column:1/-1;display:grid;gap:inherit}
.chsb-foot:empty{display:none}
/* the footer's own rule (.cdc-foot>* flex, 38px, nowrap) must not shape Build's stacked slots: full-width rows, stretched */
.chd.cdc .cdc-foot>.chsb-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch;justify-content:stretch;height:auto;min-height:0;padding:0;border:0;background:none;white-space:normal;text-align:left;border-radius:0}
.chsb-foot>*{box-sizing:border-box;width:100%;min-width:0;min-height:40px}
.chsb-foot-picker{min-height:40px}
/* Build: the panel body scrolls between the header and the pinned footer */
html[data-chsb="build"] .chd.cdc #chb>.cdc-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.chsb-foot-picker{display:flex;align-items:center;gap:5px;padding:0 5px 0 10px;border:1px solid var(--k-line,#3a3d3b);border-radius:10px;min-height:40px}
.chsb-foot-picker select{flex:1;min-width:0;height:100%;background:transparent;color:inherit;border:0;font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer;outline-offset:2px}
.chsb-foot-picker option{background:#1c1f1e;color:#f2f3f1}
.chsb-foot-picker button{flex:none;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--k-line,#3a3d3b);border-radius:8px;background:var(--k-panel,#1c1f1e);color:var(--k-ink,#f2f3f1);cursor:pointer}
.chsb-foot-picker button:hover{border-color:var(--k-accent,#e8c547)}
.chsb-foot-picker button[disabled]{opacity:.35;cursor:default}
.chsb-foot-picker svg{width:14px;height:14px}
.chsb-foot-wide{border:1px solid var(--k-line,#3a3d3b);background:var(--k-panel,#1c1f1e);color:var(--k-ink,#f2f3f1);border-radius:10px;padding:10px;font:600 12.5px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
.chsb-foot-wide[disabled]{opacity:.45;cursor:default}
.chsb-foot-cta{background:var(--k-accent,#e8c547);color:#151716;border:1px solid var(--k-accent,#e8c547);border-radius:10px;font:600 12.5px/1.2 Inter,system-ui,sans-serif;padding:12px 10px;cursor:pointer}

/* sub-screens (the build shelf) */
.chsb-view{display:grid;gap:10px}
.chsb-viewhead{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--k-line,#2e322f)}
.chsb-viewhead h3{margin:0;font:600 14px/1.2 Inter,system-ui,sans-serif}
.chsb-group{display:grid;gap:6px}
.chsb-group h5{margin:6px 0 0;font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted,#9aa09c)}
.chsb-pick{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;border:1px solid var(--k-line,#3a3d3b);background:var(--k-panel,#1c1f1e);color:var(--k-ink,#f2f3f1);border-radius:8px;padding:9px 10px;font:500 12.5px/1.25 Inter,system-ui,sans-serif;cursor:pointer}
.chsb-pick:hover{border-color:var(--k-accent,#e8c547)}
.chsb-why{display:block;margin-top:2px;color:var(--k-muted,#9aa09c);font:400 11px/1.35 Inter,system-ui,sans-serif}
.chsb-pagerow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.chsb-badge{font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:4px 6px;background:var(--k-line,#3a3d3b);color:var(--k-ink,#f2f3f1);white-space:nowrap}
.chsb-badge.is-sug{background:var(--k-accent,#e8c547);color:#151716}
.chsb-badge.is-go{background:#2fb36a;color:#fff}
.chsb-field{display:grid;gap:4px}
.chsb-field>span{color:var(--k-muted,#9aa09c);font:500 11px/1.2 Inter,system-ui,sans-serif}
.chsb-fieldhead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.chsb-field input,.chsb-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--k-line,#3a3d3b);background:var(--k-panel,#1c1f1e);color:var(--k-ink,#f2f3f1);border-radius:7px;padding:7px 8px;font:400 13px/1.4 Inter,system-ui,sans-serif}
.chsb-field textarea{min-height:64px;resize:vertical}
.chsb-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.chsb-thumbs button{padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:#2d312e}
.chsb-thumbs button[aria-pressed="true"]{border-color:var(--k-accent,#e8c547)}
.chsb-thumbs img,.chsb-thumbs video{width:100%;height:100%;object-fit:cover;display:block}
.chsb-upload{border:1px dashed var(--k-line,#3a3d3b);background:none;color:var(--k-muted,#9aa09c);font:600 11px/1.2 Inter,system-ui,sans-serif}
.chsb-upload:hover{border-color:var(--k-accent,#e8c547);color:var(--k-accent,#e8c547)}
.chsb-dealimg{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#2d312e}
.chsb-dealimg img{width:100%;height:100%;object-fit:cover;display:block}
.chsb-dealimg span{position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;gap:2px;padding:2px;background:rgba(0,0,0,.55)}
.chsb-dealimg button{width:20px;height:18px;padding:0;border:0;border-radius:4px;background:none;color:#fff;font:600 13px/1 Inter,system-ui,sans-serif;cursor:pointer;aspect-ratio:auto}
.chsb-dealimg button[disabled]{opacity:.3;cursor:default}
.chsb-dealimg button:hover:not([disabled]){background:rgba(255,255,255,.18)}

/* + Add section here, between the page's sections (Build's own element on the canvas) */
.chsb-addline{display:flex;align-items:center;gap:10px;padding:0 24px;height:0;position:relative;z-index:5;overflow:visible}
.chsb-addline::before,.chsb-addline::after{content:"";flex:1;height:2px;background:#2fb36a;opacity:0;transition:opacity .15s}
.chsb-addline button{opacity:0;transform:translateY(-50%);border:2px solid #2fb36a;background:#fff;color:#1b7a46;border-radius:999px;padding:6px 12px;font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.chsb-addline:hover::before,.chsb-addline:hover::after,.chsb-addline:hover button,.chsb-addline:focus-within button{opacity:1}
.chsb-addline:hover::before,.chsb-addline:hover::after{transform:translateY(-50%)}

/* busy, waiting, framed, comparing */
html[data-chsb-busy] [data-chs-page]{opacity:.55;transition:opacity .2s}
html[data-chsb-pending] [data-chs-page]{visibility:hidden}
html[data-chsb-framed] .chsb-addline,html[data-chsb-framed] [data-cdc-shell],html[data-chsb-framed] [data-cdc-rail],html[data-chsb-framed] [data-cdc-hc],html[data-chsb-framed] [data-plan-unsaved-notice],html[data-chsb-framed] [data-champs-widget],html[data-chsb-framed] [data-cookie-settings-host]{display:none}
html[data-chsb-framed] body{padding-right:0}
html[data-chsb-comparing],html[data-chsb-comparing] body{overflow:hidden}
html[data-chsb-comparing] [data-cdc-shell],html[data-chsb-comparing] [data-cdc-rail],html[data-chsb-comparing] [data-cdc-hc],html[data-chsb-comparing] .chsb-addline,html[data-chsb-comparing] [data-plan-unsaved-notice],html[data-chsb-comparing] [data-champs-widget]{display:none}

/* Compare */
.chsb-compare{position:fixed;inset:0;z-index:2147483647;background:#e9ebe7;display:grid;grid-template-rows:auto 1fr;font:500 13px/1.3 Inter,system-ui,sans-serif;color:#151716}
.chsb-compare__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;background:#151716;color:#f2f3f1}
.chsb-compare__bar select{border-radius:999px;padding:6px 10px;font:600 12px/1 Inter,system-ui,sans-serif;background:#232624;color:#f2f3f1;border:1px solid #3a3d3b}
.chsb-compare__bar button{margin-left:auto;border:1px solid #3a3d3b;background:none;color:#f2f3f1;border-radius:999px;padding:7px 12px;cursor:pointer}
.chsb-compare__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;min-height:0}
.chsb-compare__col{display:grid;grid-template-rows:auto auto 1fr;gap:6px;min-height:0}
.chsb-compare__timing{font:500 11px/1.4 Inter,system-ui,sans-serif;color:#5e6460}
.chsb-compare__timing summary{cursor:pointer}
.chsb-compare__timing pre{margin:4px 0 0;max-height:160px;overflow:auto;white-space:pre-wrap;background:#fff;border:1px solid #d6d9d4;border-radius:6px;padding:6px;font:11px/1.4 ui-monospace,Consolas,monospace;user-select:text}
.chsb-compare__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chsb-compare__head small{color:#5e6460}
.chsb-compare__head button{border:1px solid #151716;background:#fff;border-radius:999px;padding:4px 10px;font:600 11px/1 Inter,system-ui,sans-serif;cursor:pointer}
.chsb-compare__frame{position:relative;overflow:hidden;min-height:0}
/* a 1440-wide laptop screen scaled to the column (build.js sets --chsb-scale = column width / 1440) and as tall as the column */
.chsb-compare__frame iframe{position:absolute;top:0;left:0;width:1440px;height:calc(100% / var(--chsb-scale,1));transform:scale(var(--chsb-scale,1));border:0;transform-origin:0 0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.chsb-compare__wait{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;background:#f3f4f1;color:#5e6460;font:600 13px/1.3 Inter,system-ui,sans-serif}
.chsb-compare__wait[hidden]{display:none}
@media (max-width:767px){.chsb-compare__cols{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}}

/* ===== Page frames (CSS rebuild 2026-11-01) ===== */
/* frames-controller.css: the page frames (gallery / library pages, style guide page, business pages)
   consolidate (2026-11-01). One rule per class chain, element-level only, rem, variables, Webflow breakpoints. */

/* ---------- Global: block ---------- */

.block_relative.is-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
}
.block_relative.is-sized {
  min-height: var(--_layout---section-padding--large);
}
.block_relative.is-wide {
  aspect-ratio: 16 / 10;
  width: 100%;
}

/* ---------- Global: grid ---------- */

.grid_component.is-colored {
  color: inherit;
  text-decoration: none;
  align-items: flex-start;
  border-bottom: var(--_sizes---border--width) solid var(--_theme---border--primary);
}
@media screen and (max-width: 767px) {
  .grid_component.is-colored {
    display: flex;
    align-items: baseline;
    column-gap: var(--_layout---spacing--xxsmall);
    flex-wrap: wrap;
    row-gap: var(--_layout---spacing--xxtiny);
  }
}
.grid_component.is-columns {
  gap: var(--_layout---spacing--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 10rem), calc((100% - 2 * (var(--_layout---spacing--grid-gap) + 1rem)) / 3)), 1fr));
  grid-template-rows: auto;
}
@media screen and (max-width: 991px) {
  .grid_component.is-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
  }
}
@media screen and (max-width: 767px) {
  .grid_component.is-columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
}
.grid_component.is-filled {
  background: var(--_theme---background--page);
  height: 100%;
  place-items: center;
  width: 100%;
}
.grid_component.is-halves-alternate {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media screen and (max-width: 767px) {
  .grid_component.is-halves-alternate {
    grid-template-columns: minmax(0, 1fr);
  }
}
.grid_component.is-halves-spaced {
  gap: var(--_layout---spacing--grid-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto;
}
@media screen and (max-width: 767px) {
  .grid_component.is-halves-spaced {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
}
.grid_component.is-thirds-responsive {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
@media screen and (max-width: 991px) {
  .grid_component.is-thirds-responsive {
    grid-template-columns: minmax(0, 1fr);
  }
}
.grid_component.is-thirds-variant {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* ---------- Global: row ---------- */

.row_component.is-centered {
  align-items: center;
}
.row_component.is-centered-colored {
  border-radius: var(--_sizes---border-radius--medium);
  color: var(--_theme---text--icon);
  height: var(--_sizes---icon--medium);
  width: var(--_sizes---icon--medium);
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
}
.row_component.is-centered-sized {
  min-width: 0;
  align-items: center;
}
.row_component.is-centered-spread {
  cursor: pointer;
  gap: var(--_layout---spacing--small);
  list-style: none;
  align-items: center;
  justify-content: space-between;
}
.row_component.is-centered-spread::-webkit-details-marker {
  display: none;
}
.row_component.is-centered-wrap {
  align-items: center;
  flex-wrap: wrap;
}
.row_component.is-sized {
  height: var(--_sizes---icon--small);
  transition: transform .2s;
  width: var(--_sizes---icon--small);
  flex-shrink: 0;
}
.row_component.is-spaced {
  gap: var(--_layout---spacing--xtiny);
  width: 100%;
  align-items: flex-end;
  margin-top: var(--_layout---spacing--xtiny);
}
@media screen and (max-width: 767px) {
  .row_component.is-spaced {
    max-width: 100%;
  }
}
@media screen and (max-width: 479px) {
  .row_component.is-spaced {
    align-items: stretch;
    flex-direction: column;
  }
}
.row_component.is-spread {
  align-items: center;
  justify-content: space-between;
}
.row_component.is-spread-center {
  gap: var(--_layout---spacing--xxsmall);
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .row_component.is-spread-center {
    align-items: flex-start;
    flex-direction: column;
  }
}
@supports (color: color(from red xyz-d65 x y z)) and (color: color-mix(in xyz-d65, red, blue)) and (width: calc(pow(2, 2) * 1px)) {
  .row_component.is-spread-center {
    --_theme---accent--primary: var(--_theme---controller--accent-ui);
  }
}
@supports (color: color(from red xyz-d65 x y z)) and (color: color-mix(in xyz-d65, red, blue)) and (width: calc(pow(2, 2) * 1px)) {
  .row_component.is-spread-center:hover {
    --_theme---accent--primary: var(--_theme---controller--accent-ink);
  }
}
.row_component.is-start {
  gap: var(--_layout---spacing--xtiny,.75rem);
  height: auto;
  min-width: 0;
  width: 100%;
  align-items: flex-start;
}

/* ---------- Global: stack ---------- */

.stack_component.is-bordered {
  border: var(--_sizes---border--width) solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--medium);
  height: 100%;
  width: 100%;
}
.stack_component.is-bordered-rounded {
  border: var(--_sizes---border--width) solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--medium);
  gap: var(--_layout---spacing--small);
  height: 100%;
  width: 100%;
}
.stack_component.is-bordered-rounded-spaced {
  border: var(--_sizes---border--width) solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--large);
  gap: var(--_layout---spacing--xxsmall);
}
.stack_component.is-filled {
  border: var(--_sizes---border--width) solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--large);
  overflow: hidden;
  background-color: var(--_theme---background--page);
}
.stack_component.is-grow {
  flex: 1;
  min-width: 0;
  row-gap: var(--_layout---spacing--xxtiny);
}
@media screen and (max-width: 767px) {
  .stack_component.is-grow {
    flex: none;
  }
}
.stack_component.is-row-spaced {
  row-gap: var(--_layout---spacing--xxtiny);
}
.stack_component.is-sized {
  align-items: flex-start;
  flex-grow: 1;
}
.stack_component.is-spaced {
  row-gap: var(--_layout---spacing--large);
}
.stack_component.is-stretch {
  align-items: stretch;
  row-gap: var(--_layout---spacing--xxsmall);
}
@media screen and (max-width: 767px) {
  .stack_component.is-stretch {
    max-width: 100%;
  }
}

/* ---------- library ---------- */

.library_filter {
  display: flex;
  gap: var(--_layout---spacing--xtiny);
  position: sticky;
  border-bottom: var(--_sizes---border--width) solid var(--_theme---border--primary);
  flex-wrap: wrap;
  top: 0;
  z-index: 50;
}
.form_row {
  display: flex;
  gap: var(--_layout---spacing--xxsmall);
  flex-wrap: wrap;
  align-items: center;
}
.library_filter-link {
  border: var(--_sizes---border--width) solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--round);
  transition: all .2s;
  padding-bottom: var(--_layout---spacing--xxtiny);
  padding-left: var(--_layout---spacing--xxsmall);
  padding-right: var(--_layout---spacing--xxsmall);
  padding-top: var(--_layout---spacing--xxtiny);
}
.library_header {
  display: flex;
  align-items: flex-start;
  border-bottom: var(--_sizes---border--width) solid var(--_theme---border--primary);
  flex-direction: column;
}
.library_hub-card {
  border: var(--_sizes---border--width) solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--medium);
  display: flex;
  gap: var(--_layout---spacing--medium);
  min-height: 100%;
  transition: all .2s;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: var(--_layout---spacing--small);
  padding-left: var(--_layout---spacing--small);
  padding-right: var(--_layout---spacing--small);
  padding-top: var(--_layout---spacing--small);
}
.library_hub-grid {
  display: grid;
  padding-bottom: var(--_layout---spacing--xxlarge);
  padding-top: var(--_layout---spacing--large);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
@media screen and (max-width: 991px) {
  .library_hub-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .library_hub-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media screen and (max-width: 479px) {
  .library_hub-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.library_item {
  position: relative;
  display: block;
  border-bottom: var(--_sizes---border--width) solid var(--_theme---border--primary);
}
/* a design shown in the gallery sits in its own item: navigation bars are absolute (over the hero) on a business page */
.library_item > [data-champs-component] {
  position: relative;
}
.library_label {
  display: flex;
  gap: var(--_layout---spacing--xtiny);
  letter-spacing: .1em;
  align-items: center;
  flex-wrap: wrap;
  font-variant: small-caps;
  justify-content: space-between;
  padding-bottom: var(--_layout---spacing--xtiny);
  padding-left: var(--_layout---spacing--global-padding);
  padding-right: var(--_layout---spacing--global-padding);
  padding-top: var(--_layout---spacing--xtiny);
  border-bottom-color: var(--_theme---border--primary);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.library_nav-spacer {
  height: 9rem;
}
.library_page {
  font-family: var(--font-family--body);
}
.library_panel.is-relative {
  border-radius: var(--_sizes---border-radius--round);
  height: var(--_sizes---icon--medium);
  position: relative;
  width: var(--_sizes---icon--medium);
  flex-shrink: 0;
}
.library_panel.is-ruled {
  border-bottom: var(--_sizes---border--width) solid var(--_theme---border--primary);
}
.library_text.is-bold {
  font-weight: 600;
  margin-bottom: var(--_layout---spacing--xtiny);
}
.library_text.is-tinted {
  color: var(--_theme---link--primary);
  padding-top: var(--_layout---spacing--xtiny);
}
.library_text.is-tinted-relaxed {
  color: var(--_theme---text--muted);
  opacity: 1;
  line-height: 1.5;
}

/* ---------- styleguide ---------- */

.styleguide_block.is-block {
  display: block;
}
.styleguide_block.is-filled {
  background: var(--_theme---background--page);
}
.styleguide_block.is-layer {
  height: 100%;
  inset: 0;
  min-height: 0;
  position: absolute;
  width: 100%;
}
.styleguide_block.is-nowrap {
  white-space: nowrap;
  font-weight: 700;
}
.styleguide_image.is-block {
  display: block;
  height: var(--_sizes---icon--small);
  width: var(--_sizes---icon--small);
  flex-shrink: 0;
}
.styleguide_image.is-rounded {
  border-radius: 0;
}
.styleguide_panel.is-bordered {
  border: var(--_sizes---border--width) solid var(--_theme---border--primary);
}
.styleguide_panel.is-bordered-rounded {
  border: var(--_sizes---border--width) solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--medium);
  width: 100%;
}
.styleguide_panel.is-filled {
  --_theme---background--alternate: color-mix(in srgb,var(--brand--light) 94%,var(--brand--dark));
  --_theme---background--card: var(--brand--accent-50);
  --_theme---background--page: var(--brand--light);
  border-radius: var(--_sizes---border-radius--small);
  background-color: var(--_theme---background--card);
  font-weight: 500;
  line-height: 1.4;
}
.styleguide_panel.is-relative {
  border-radius: var(--_sizes---border-radius--medium);
  position: relative;
}
.styleguide_panel.is-relative-round {
  border-radius: 50%;
  height: 3rem;
  position: relative;
  width: 3rem;
}
.styleguide_panel.is-relative-rounded {
  aspect-ratio: 4 / 3;
  border-radius: var(--_sizes---border-radius--large);
  position: relative;
  width: 100%;
}
.styleguide_panel.is-rounded {
  border-radius: 0;
}
.styleguide_text.is-bold {
  letter-spacing: var(--_typography---heading--heading-letter-spacing);
  text-transform: none;
  font-family: var(--font-family--heading);
  font-weight: var(--_typography---heading--heading-font-weight);
  line-height: 1.2;
}
.styleguide_text.is-filled {
  background: transparent;
}
.styleguide_text.is-grow {
  flex: 1 1 0;
  min-width: 0;
}
.styleguide_text.is-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.styleguide_text.is-nowrap {
  white-space: nowrap;
  font-weight: 600;
}
.styleguide_text.is-relative {
  position: relative;
  font-family: var(--font-family--body);
}
.styleguide_text.is-responsive {
  font-family: var(--font-family--body);
}
.styleguide_text.is-responsive-alternate {
  font-family: var(--font-family--heading);
}
.styleguide_text.is-snug {
  font-family: var(--font-family--heading);
  line-height: 1.2;
}
.styleguide_text.is-snug-tracked {
  letter-spacing: -.02em;
  text-transform: none;
  font-family: var(--font-family--heading);
  line-height: 1.05;
}
@media screen and (max-width: 991px) {
  .styleguide_text.is-snug-tracked {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 767px) {
  .styleguide_text.is-snug-tracked {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}
.styleguide_text.is-snug-tracked-alternate {
  letter-spacing: -.02em;
  text-transform: none;
  font-family: var(--font-family--heading);
  line-height: 1.05;
}
@media screen and (max-width: 991px) {
  .styleguide_text.is-snug-tracked-alternate {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .styleguide_text.is-snug-tracked-alternate {
    font-size: 1.75rem;
  }
}
.styleguide_text.is-tinted {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* the footer as before: Saved | Features side by side, the main action across the row */
.chd.cdc .cdc-foot>.cdc-send{grid-column:1/-1}

/* the wait screen: the Champs animation and one line while the private link opens and while Build places the client's sections */
.chs-wait{position:fixed;top:0;left:0;bottom:0;right:0;z-index:2147483647;background:var(--_theme---surface-page,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
html[data-cdc-panel="closed"] .chs-wait{right:44px}
html[data-cdc-panel="open"] .chs-wait{right:380px}
.chs-wait_art{width:14rem;max-width:60vw;aspect-ratio:473/406}
.chs-wait_line{margin:0;font:500 .9375rem/1.4 var(--_brand---font-body,system-ui),system-ui,sans-serif;color:var(--_theme---text-muted,#5c615e);text-align:center}