/* Curious Branding account + checkout. Matches curiousbranding.com/digital-signage/ (style.css of the store):
   Open Sans headings, Lato body, navy #2c3e50 buttons, #315b8b titles, #f6f6f6 ground, #343434 footer. */
:root {
  --navy:#2c3e50; --navy-2:#34495e; --title:#315b8b; --blue:#1984da; --ink:#2c3e50; --text:#555; --muted:#767676;
  --line:#e5e5e5; --ground:#f6f6f6; --foot:#343434; --ok-bg:#e3f4e8; --ok:#1e6b34; --err-bg:#fde7ea; --err:#a30018;
  --warn-bg:#fff4cc; --warn:#6b5400; --radius:6px;
  --head:"Open Sans", Arial, sans-serif; --body:Lato, Arial, sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--foot); } /* a page shorter than the screen ends in footer colour, not a white strip */
body { margin:0; font:16px/1.6 var(--body); color:var(--text); background:#fff; overflow-x:hidden; }
img { max-width:100%; height:auto; }
a { color:var(--title); }
a:hover { color:var(--blue); }
h1, h2, h3 { font-family:var(--head); color:var(--ink); line-height:1.3; }
h2 { font-size:20px; font-weight:700; margin:0 0 12px; }
h3 { font-size:17px; font-weight:600; margin:16px 0 8px; }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

.cb-test { background:var(--warn-bg); color:var(--warn); text-align:center; font-size:14px; padding:6px 16px; }

/* Header (store: 90px white bar, logo left, bold Open Sans menu) */
.cb-top { background:#fff; position:relative; z-index:20; box-shadow:0 1px 0 rgba(0,0,0,.04); }
.cb-top-in { max-width:1170px; margin:0 auto; padding:0 16px; min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cb-logo { display:block; flex:0 0 auto; }
.cb-logo img { display:block; width:125px; height:50px; }
.cb-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.cb-nav a { display:block; font:700 15px/1 var(--head); color:#354b60; text-decoration:none; padding:37px 13px; }
.cb-nav a:hover { color:var(--blue); }
.cb-nav .cb-nav-acct { color:var(--title); }
.cb-burger { display:none; background:none; border:0; padding:10px; min-width:48px; min-height:48px; cursor:pointer; }
.cb-burger span { display:block; width:28px; height:3px; margin:5px 0; background:#111; border-radius:2px; }
@media (max-width:1099px) {
  .cb-top-in { min-height:72px; flex-wrap:wrap; }
  .cb-burger { display:block; }
  .cb-nav { display:none; flex:1 0 100%; }
  .cb-top.cb-open .cb-nav { display:block; }
  .cb-nav ul { flex-direction:column; padding:0 0 12px; }
  .cb-nav a { padding:14px 4px; border-top:1px solid var(--line); }
}

/* Page title band (store: breadcumb.jpg under a 70% black wash, uppercase title, Home / page) */
.cb-band { position:relative; background-color:#111; background-size:cover; background-position:center; text-align:center; }
.cb-band::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.7); }
.cb-band-in { position:relative; z-index:1; max-width:1170px; margin:0 auto; padding:56px 16px 48px; }
.cb-band h1 { margin:0 0 14px; color:var(--title); font-size:24px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.cb-crumb { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 0; color:#fff; font-size:16px; }
.cb-crumb li + li::before { content:"/"; padding:0 8px; color:#ccc; }
.cb-crumb a { color:#fff; text-decoration:none; font-family:var(--head); font-weight:600; }
.cb-crumb a:hover { color:var(--blue); }

/* Body ground and cards (store: #f6f6f6 section, white cards) */
.cb-body { background:var(--ground); }
.cb-main { max-width:760px; margin:0 auto; padding:32px 16px 56px; }
.cb-main.cb-wide { max-width:1170px; }
.cb-who { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px 12px; margin:0 0 16px; font-size:15px; color:#666; } /* 5.3:1 on the grey ground (was 4.20:1) */
.cb-who strong { color:var(--ink); font-weight:700; word-break:break-all; }
.cb-out { margin:0; }
.cb-card { background:#fff; border-radius:4px; padding:24px; margin:0 0 20px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.cb-alert { border-left:4px solid #e0a04a; background:#fffaf2; }
.cb-back { margin:8px 0 0; }

/* Forms */
.cb-form { display:flex; flex-direction:column; gap:8px; }
.cb-form > .cb-field-pair { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.cb-form label, .cb-field label { margin-top:6px; font-size:15px; font-weight:700; color:var(--ink); }
.cb-field { display:flex; flex-direction:column; gap:6px; }
.cb-hint { margin:-2px 0 4px; font-size:14px; color:var(--muted); }
input[type=email], input[type=text], input[type=tel], input[type=number], input[type=password], select {
  font:inherit; font-size:16px; color:var(--ink); padding:11px 12px; min-height:48px; border:1px solid #ccc; border-radius:4px; background:#fff; width:100%; }
input:focus, select:focus { border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(25,132,218,.2); }
select { max-width:none; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { font:700 15px var(--body); color:var(--ink); padding:0; margin:6px 0 8px; }

/* Buttons (store: navy #2c3e50, 6px corners, white Lato) */
button, .cb-btn { font:400 17px/1.2 var(--body); display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 22px; min-height:48px;
  border:0; border-radius:var(--radius); background:var(--navy); color:#fff; cursor:pointer; text-decoration:none; text-align:center; }
button:hover, .cb-btn:hover { background:var(--navy-2); color:#fff; }
button:disabled { opacity:.65; cursor:default; }
.cb-btn-2, button.cb-btn-2 { background:#fff; color:var(--navy); border:1px solid #c9ced3; }
.cb-btn-2:hover, button.cb-btn-2:hover { background:#f1f3f5; color:var(--navy); }
.cb-btn-danger, button.cb-btn-danger { background:#a30018; }
.cb-btn-danger:hover, button.cb-btn-danger:hover { background:#850014; }
.cb-link, button.cb-link { background:none; border:0; padding:8px 4px; min-height:44px; color:var(--title); text-decoration:underline; font-size:15px; }
.cb-link:hover, button.cb-link:hover { background:none; color:var(--blue); }
.cb-form button[type=submit], .cb-wide-btn { margin-top:12px; width:100%; }
.cb-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0 0; }
.cb-actions form { margin:0; }

/* Progress: spinner on the button that is working, a bar along the top, and the Stripe form loading */
.cb-spin { width:18px; height:18px; flex:0 0 18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:cb-rot .8s linear infinite; }
.cb-btn-2 .cb-spin, .cb-link .cb-spin, .cb-loading .cb-spin { border-color:rgba(44,62,80,.25); border-top-color:var(--navy); }
.cb-busy { cursor:progress !important; }
.cb-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:100; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .2s; }
.cb-progress::before { content:""; position:absolute; top:0; bottom:0; width:40%; background:var(--blue); animation:cb-slide 1.1s ease-in-out infinite; }
body.cb-working .cb-progress { opacity:1; }
body.cb-working { cursor:progress; }
.cb-loading { display:flex; align-items:center; gap:12px; padding:18px 0; color:var(--muted); }
.cb-status { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; }
@keyframes cb-rot { to { transform:rotate(360deg); } }
@keyframes cb-slide { 0% { left:-40%; } 100% { left:100%; } }
@media (prefers-reduced-motion:reduce) { .cb-spin { animation-duration:2s; } .cb-progress::before { animation-duration:3s; } }

/* Messages, badges, tables */
.cb-err { color:var(--err); }
.cb-err:empty { display:none; }
.cb-flash { padding:12px 16px; border-radius:4px; background:var(--ok-bg); color:var(--ok); }
.cb-flash-err { background:var(--err-bg); color:var(--err); }
.cb-test-note { background:var(--warn-bg); padding:8px 12px; border-radius:4px; }
.cb-muted { color:var(--muted); font-size:15px; }
.cb-badge { display:inline-block; font-size:13px; padding:2px 10px; border-radius:999px; background:var(--warn-bg); color:var(--warn); vertical-align:middle; }
.cb-badge-ok { background:var(--ok-bg); color:var(--ok); }
.cb-list { padding-left:20px; }
.cb-plain { list-style:none; margin:0; padding:0; }
.cb-plain li { padding:6px 0; }
.cb-table { width:100%; border-collapse:collapse; font-size:16px; }
.cb-table th { font:600 13px var(--head); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.cb-table th, .cb-table td { text-align:left; padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.cb-table td { color:var(--ink); }
.cb-num { text-align:right !important; white-space:nowrap; }
.cb-sum td { font-weight:700; border-bottom:0; font-size:18px; }
.cb-total { font-size:18px; color:var(--ink); }
.cb-sub { display:block; font-size:14px; line-height:1.5; color:var(--muted); margin-top:4px; }
.cb-doc a { display:inline-flex; align-items:center; min-height:44px; padding:0 6px; }

/* Account: plan block */
.cb-plan { display:flex; gap:16px; align-items:center; margin:0 0 12px; color:var(--ink); }
.cb-big { font:700 32px/1 var(--head); min-width:64px; height:64px; padding:0 8px; border-radius:6px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; }
.cb-plan strong { font-family:var(--head); font-size:18px; }

/* Payment methods list */
.cb-pms { list-style:none; margin:0; padding:0; }
.cb-pms li { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; color:var(--ink); }
.cb-pms .cb-actions { margin:0; }
.cb-radio { display:flex; gap:10px; align-items:flex-start; font-weight:400 !important; min-height:44px; padding:6px 0; color:var(--ink); }
.cb-radio input { width:20px; height:20px; margin:2px 0 0; flex:0 0 20px; accent-color:var(--navy); }

/* Stripe Payment Element */
#cb-element { margin:0 0 12px; min-height:60px; }

/* Plan picker (store's plan cards: price, navy name pill) */
.cb-plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.cb-planopt { position:relative; background:#fff; border:2px solid var(--line); border-radius:6px; text-align:center; transition:border-color .2s, box-shadow .2s; }
.cb-planopt:has(input:checked) { border-color:var(--navy); box-shadow:0 4px 14px rgba(44,62,80,.15); }
/* The "?" button sits beside the label, never on it (S8 UI audit M2): the label box stops 52px short of the right edge
   (the button is 44px at right 6px), so the button column is the card's own and the plan name and price never run under it. */
.cb-planopt label { display:block; margin:0 52px 0 0; padding:18px 0 16px 8px; cursor:pointer; }
.cb-planopt input { position:absolute; opacity:0; pointer-events:none; }
.cb-planopt input:focus-visible + .cb-pname { outline:3px solid var(--blue); outline-offset:2px; }
.cb-pprice { display:block; font:600 22px/1.1 var(--head); color:var(--navy); }
.cb-pper { display:block; font-size:13px; font-weight:400; color:var(--muted); margin:4px 0 12px; }
.cb-pname { display:inline-block; min-width:110px; padding:8px 14px; border-radius:6px; background:var(--navy-2); color:#fff; font:400 17px var(--head); }
.cb-planopt .cb-tipwrap { position:absolute; top:6px; right:6px; }
@media (max-width:599px) {
  .cb-plans { grid-template-columns:1fr; }
  .cb-planopt label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-right:56px; padding:14px 0 14px 14px; text-align:left; }
  .cb-pper { margin:2px 0 0; }
  .cb-pname { order:-1; min-width:0; }
  .cb-planopt .cb-tipwrap { top:50%; transform:translateY(-50%); right:8px; }
}

/* "?" plan info: hover with a mouse, tap on touch */
.cb-tipwrap { position:relative; display:inline-block; vertical-align:middle; }
.cb-tip { width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; background:transparent; color:var(--title); font:700 16px/1 var(--head); display:inline-flex; align-items:center; justify-content:center; position:relative; }
.cb-tip::before { content:""; position:absolute; width:26px; height:26px; border:2px solid currentColor; border-radius:50%; }
.cb-tip:hover, .cb-tip[aria-expanded=true] { background:rgba(25,132,218,.1); color:var(--blue); }
.cb-tipbox { display:none; position:absolute; z-index:30; top:calc(100% + 4px); right:-6px; width:280px; max-width:calc(100vw - 32px); padding:14px 16px; background:var(--navy); color:#fff; border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.2); text-align:left; font-size:14px; line-height:1.5; }
.cb-tipbox strong { display:block; font-family:var(--head); margin-bottom:6px; }
.cb-tipbox ul { margin:0; padding-left:18px; }
.cb-tipbox li { padding:2px 0; }
.cb-tipwrap.cb-tip-open .cb-tipbox { display:block; }
@media (hover:hover) { .cb-tipwrap:hover .cb-tipbox { display:block; } }

/* "What your plan includes" panel in the free space */
.cb-includes h2 { color:var(--title); }
.cb-includes dl { margin:0; }
.cb-includes dt { font:600 16px var(--head); color:var(--ink); margin:14px 0 2px; padding-left:24px; position:relative; }
.cb-includes dt::before { content:""; position:absolute; left:2px; top:5px; width:12px; height:7px; border-left:3px solid var(--blue); border-bottom:3px solid var(--blue); transform:rotate(-45deg); }
.cb-includes dd { margin:0 0 0 24px; font-size:14px; color:var(--muted); }
.cb-includes [hidden] { display:none; }

/* Add-on cards (store's addons.php cards: picture, title with price, description) */
.cb-addons { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:4px 0; }
.cb-addon { border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.cb-addon img { display:block; width:100%; aspect-ratio:327/194; object-fit:cover; }
.cb-addon-txt { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cb-addon h3 { margin:0; font-size:17px; }
.cb-addon p { margin:0; font-size:15px; color:var(--muted); flex:1; }
.cb-addon .cb-qty { display:flex; align-items:center; gap:10px; }
.cb-addon .cb-qty label { margin:0; font-weight:400; font-size:15px; }
.cb-addon .cb-qty input { width:90px; }
@media (max-width:599px) { .cb-addons { grid-template-columns:1fr; } }

/* Two columns on wide screens: the form, and the order or plan panel beside it */
.cb-split { display:grid; gap:0 24px; }
@media (min-width:900px) {
  .cb-split { grid-template-columns:minmax(0, 1fr) 360px; align-items:start; }
  .cb-split > .cb-aside { grid-column:2; grid-row:1 / span 3; position:sticky; top:16px; }
  .cb-split > :not(.cb-aside) { grid-column:1; }
}

/* Footer (store: dark #343434, ringed social icons, "All Rights Reserved Curious Branding") */
.cb-foot { background:var(--foot); color:#fff; text-align:center; padding:0 16px; }
.cb-social { max-width:1140px; margin:0 auto; padding:44px 0 26px; border-bottom:1px solid rgba(255,255,255,.2); display:flex; justify-content:center; gap:6px; }
.cb-social a { width:44px; height:44px; border:2px solid #ddd; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.cb-social a:hover { background:var(--title); border-color:transparent; color:#fff; }
.cb-ico { font:normal 20px/1 cbico; }
.cb-ico-ig::before { content:"\ee14"; } .cb-ico-tw::before { content:"\ee34"; } .cb-ico-in::before { content:"\f123"; } .cb-ico-yt::before { content:"\f137"; }
.cb-foot p { margin:0; padding:28px 0 46px; }
.cb-foot p a { color:#fff; font:600 16px var(--head); text-decoration:none; }
.cb-foot p a:hover { color:var(--blue); }

@media (max-width:599px) {
  .cb-band-in { padding:36px 16px 30px; }
  .cb-main { padding:20px 16px 40px; }
  .cb-card { padding:18px 16px; }
  .cb-form > .cb-field-pair { grid-template-columns:1fr; }
  .cb-actions > .cb-btn, .cb-actions > button, .cb-actions > form, .cb-actions > form > button { width:100%; }
  .cb-table:not(.cb-lines) thead { display:none; }
  .cb-table:not(.cb-lines) tr { display:block; border-bottom:1px solid var(--line); padding:8px 0; }
  .cb-table:not(.cb-lines) td { display:flex; justify-content:space-between; gap:12px; border:0; padding:3px 0; }
  .cb-table:not(.cb-lines) td[data-l]::before { content:attr(data-l); color:var(--muted); }
}
.cb-lines .cb-tipbox { left:-6px; right:auto; }
@media (max-width:599px) {
  .cb-pname { width:118px; flex:0 0 118px; padding:8px 6px; }
  .cb-planopt label > span:last-child { flex:1; }
  .cb-pprice { font-size:20px; }
  .cb-crumb li[aria-current] { display:none; }
}
/* Helper note under forms (login / password pages) */
.cb-note { margin:12px 0 0; padding:12px 16px; border-left:4px solid var(--blue); background:#f1f7fd; border-radius:4px; color:var(--ink); font-size:15px; }
.cb-form .cb-note { margin-top:8px; }
/* Forms on other pages that are not wrapped in a card (login, password) get the card look. */
.cb-main > form.cb-form:not(.cb-card) { background:#fff; border-radius:4px; padding:24px; margin:0 0 20px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
@media (max-width:599px) { .cb-main > form.cb-form:not(.cb-card) { padding:18px 16px; } }
/* Several plans on one account (audit B2): each plan is one block, and each Stripe customer's payment methods one group. */
.cb-plangroup + .cb-plangroup { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.cb-plangroup .cb-note { margin-bottom:0; }
.cb-pmgroup { margin:0 0 32px; }
.cb-pmgroup > h2 { margin-bottom:4px; }
.cb-pmgroup > .cb-muted { margin:0 0 12px; }

/* Team dashboard (M2 S3): status chips, filters, the customer list, the customer page. */
.cb-badge-bad { background:var(--err-bg); color:var(--err); }
.cb-badge-muted { background:#eceef0; color:#4d5660; }
.cb-badge-info { background:#e3effa; color:#1b4f80; }
.cb-chips { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px; margin:0 0 14px; }
.cb-chip { display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:64px; padding:10px 14px; background:#fff; border:2px solid transparent; border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); text-decoration:none; color:var(--ink); }
.cb-chip strong { font:700 24px/1.1 var(--head); color:var(--navy); }
.cb-chip span { font-size:14px; color:var(--muted); }
.cb-chip:hover { border-color:#c9ced3; color:var(--ink); }
.cb-chip-on { border-color:var(--navy); }
.cb-chip-past_due strong { color:var(--err); }
@media (min-width:600px) and (max-width:1023px) { .cb-chip { padding:8px 10px; } .cb-chip span { font-size:13px; line-height:1.3; } }
.cb-dash-fresh { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 12px; margin:0 0 14px; }
.cb-dash-fresh .cb-muted { font-size:14px; color:#666; } /* 5.3:1 on the grey ground */
button.cb-small, .cb-btn.cb-small { min-height:44px; padding:8px 16px; font-size:15px; }
.cb-filters { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px 14px; align-items:end; padding:18px 20px; }
.cb-filters .cb-f-q { grid-column:1 / -1; }
.cb-filters label { margin-top:0; }
.cb-f-go { display:flex; gap:10px; }
.cb-f-go > * { flex:1; }
.cb-filters button[type=submit] { width:auto; margin-top:0; }
@media (min-width:1100px) {
  .cb-filters { grid-template-columns:minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; }
  .cb-filters .cb-f-q { grid-column:auto; }
  .cb-f-go > * { flex:0 0 auto; }
}
@media (max-width:899px) { .cb-filters { grid-template-columns:repeat(2, minmax(0, 1fr)); } .cb-f-go { grid-column:1 / -1; } }
@media (max-width:599px) { .cb-filters { padding:16px; gap:8px 10px; } }
.cb-dash-count { margin:4px 0 10px; color:var(--ink); font-weight:700; }
.cb-dash-wrap { padding:6px 16px; }
.cb-table.cb-dash { font-size:15px; }
.cb-table.cb-dash th, .cb-table.cb-dash td { padding:12px 8px; }
.cb-dash-name { font-weight:700; overflow-wrap:break-word; }
.cb-dash-cust .cb-sub { overflow-wrap:break-word; }
/* Emails wrap only before "@" or "." (<wbr> from cb_td_email), never mid-word (S7 leftover 2) */
.cb-email { overflow-wrap:break-word; word-break:normal; }
.cb-dash .cb-badge, .cb-dash-detail .cb-badge { border-radius:12px; line-height:1.4; padding:3px 10px; }
.cb-dash .cb-dash-st .cb-badge { white-space:nowrap; }
@media (min-width:1000px) { .cb-table.cb-dash td.cb-dash-cust { width:19%; } }
@media (min-width:1000px) and (max-width:1199px) { .cb-table.cb-dash td.cb-dash-cust { width:22%; } }
/* Laptop (1000-1199): still the table, a little tighter, so a laptop sees many rows a screen (UI audit 5) */
@media (min-width:1000px) and (max-width:1199px) {
  .cb-dash-wrap { padding:6px 10px; }
  .cb-table.cb-dash { font-size:14px; }
  .cb-table.cb-dash th, .cb-table.cb-dash td { padding:10px 5px; }
  .cb-table.cb-dash th { font-size:12px; letter-spacing:0; }
}
@media (max-width:999px) {
  .cb-dash-wrap { background:none; box-shadow:none; padding:0; }
  .cb-table.cb-dash thead { display:none; }
  .cb-table.cb-dash, .cb-table.cb-dash tbody { display:block; }
  .cb-table.cb-dash tr { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px 14px; background:#fff; border:0; border-radius:4px;
    padding:14px 16px; margin:0 0 12px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
  .cb-table.cb-dash td { display:block; padding:0; border:0; min-width:0; }
  .cb-table.cb-dash td[data-l]::before { content:attr(data-l); display:block; font:600 12px var(--head); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:2px; }
  .cb-table.cb-dash td.cb-dash-cust { grid-column:1 / -1; padding-bottom:8px; border-bottom:1px solid var(--line); }
  .cb-table.cb-dash td.cb-dash-cust::before { display:none; }
  .cb-dash-name { font-size:17px; }
  /* touch: 44px+ tall hit area for the row's main link and the Billed-to link (UI audit 1) */
  .cb-dash-name, .cb-table.cb-dash td a { display:inline-block; max-width:100%; padding:10px 0; }
}
@media (max-width:999px) { .cb-table.cb-dash tr { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:599px) {
  .cb-table.cb-dash tr { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cb-chips { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
  .cb-chip { min-height:56px; padding:8px 10px; }
  .cb-chip strong { font-size:20px; }
  .cb-chip span { font-size:13px; line-height:1.3; }
  .cb-dash-fresh { justify-content:space-between; }
}
.cb-pager { justify-content:center; }
/* "Page N of M" and grey lines that sit on the grey ground, not in a white card: 5.3:1 (S7 UI fix M1) */
.cb-pager .cb-muted, .cb-main > p.cb-muted { color:#666; }
/* phone: the page count always sits above the buttons, on every page (S7 UI fix L3) */
@media (max-width:599px) { .cb-pager > span { order:-1; flex:1 0 100%; text-align:center; } }
/* Customer page */
.cb-dash-back { margin:0 0 12px; }
.cb-dash-back a { display:inline-flex; align-items:center; min-height:44px; }
.cb-dash-detail { display:grid; gap:0 20px; }
@media (min-width:1024px) { .cb-dash-detail { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; } }
.cb-dash-title { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 12px; }
.cb-dash-title h2, .cb-dash-title h3 { margin:0; overflow-wrap:anywhere; }
.cb-facts { margin:0 0 12px; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px 20px; }
.cb-facts dt { font:600 12px var(--head); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.cb-facts dd { margin:2px 0 0; color:var(--ink); overflow-wrap:anywhere; }
/* Plans and other detail tables: room between a right-aligned number and the column after it (UI audit 4) */
@media (min-width:600px) { .cb-dash-detail .cb-table th.cb-num + th, .cb-dash-detail .cb-table td.cb-num + td { padding-left:22px; } }
.cb-timeline { list-style:none; margin:8px 0 0; padding:0 0 0 18px; border-left:2px solid var(--line); }
.cb-timeline li { position:relative; padding:4px 0 10px; color:var(--ink); }
.cb-timeline li::before { content:""; position:absolute; left:-25px; top:10px; width:10px; height:10px; border-radius:50%; background:var(--navy); border:2px solid #fff; }
.cb-timeline .cb-muted { font-size:14px; }
@media (max-width:599px) {
  .cb-dash-detail .cb-table:not(.cb-lines) td { display:block; position:relative; padding:3px 0 3px calc(40% + 12px); min-height:28px; overflow-wrap:anywhere; }
  .cb-dash-detail .cb-table:not(.cb-lines) td[data-l]::before { position:absolute; left:0; top:3px; width:40%; font-size:14px; line-height:1.6; }
  /* a value that starts with a 44 px link: the label sits on the link's text line, not 10 px above it (S7 leftover 5) */
  .cb-dash-detail .cb-table:not(.cb-lines) td:has(> a:first-child)[data-l]::before { top:13px; }
  .cb-dash-detail .cb-num { text-align:left !important; white-space:normal; }
}
/* phone and tablet (touch): 44px+ tall hit area on value links (email, phone, Stripe id, bill, sub-customer)
   (UI audit 1, extended to tablets in S7 leftover 4) */
@media (max-width:1023px) {
  .cb-dash-detail dd a, .cb-dash-detail td a { display:inline-block; max-width:100%; padding:10px 0; }
}

/* Team area menu (Customers, Yodeck bills and profit) */
.cb-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.cb-tabs a { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:22px; background:#fff; color:var(--ink);
  font:600 15px var(--head); text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.05); border:2px solid transparent; }
.cb-tabs a:hover { border-color:#c9ced3; color:var(--ink); }
.cb-tabs a.cb-tab-on { background:var(--navy); color:#fff; }

/* Yodeck bills and profit (M2 S7) */
.cb-yi-sum { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 16px; }
.cb-yi-sum > div { background:#fff; border-radius:6px; padding:12px 14px; box-shadow:0 1px 3px rgba(0,0,0,.05); min-width:0; }
.cb-yi-sum strong { display:block; font:700 22px/1.2 var(--head); color:var(--navy); overflow-wrap:anywhere; }
.cb-yi-sum span { font-size:14px; color:var(--muted); }
.cb-yi-sum .cb-yi-neg strong { color:var(--err); }
@media (max-width:767px) { .cb-yi-sum { grid-template-columns:repeat(2, minmax(0, 1fr)); } .cb-yi-sum strong { font-size:19px; } }
.cb-yi-flags { display:flex; flex-wrap:wrap; gap:6px; }
.cb-yi .cb-badge { border-radius:12px; line-height:1.4; padding:3px 10px; }
.cb-table.cb-yi { font-size:15px; }
.cb-table.cb-yi th, .cb-table.cb-yi td { padding:10px 8px; vertical-align:top; }
.cb-table.cb-yi .cb-num { text-align:right; white-space:nowrap; }
.cb-table.cb-yi td.cb-yi-who { overflow-wrap:break-word; }
.cb-yi-neg { color:var(--err); }
@media (min-width:1000px) { .cb-table.cb-yi td.cb-yi-wide { min-width:170px; } }
@media (min-width:1000px) and (max-width:1199px) { .cb-table.cb-yi { font-size:14px; } .cb-table.cb-yi th, .cb-table.cb-yi td { padding:10px 5px; } .cb-table.cb-yi th { font-size:12px; letter-spacing:0; } }
.cb-yi-total td { font-weight:700; border-top:2px solid var(--line); }
.cb-yi-upload textarea { font:14px/1.5 ui-monospace, Menlo, Consolas, monospace; width:100%; min-height:140px; padding:10px 12px; border:1px solid #ccc; border-radius:4px; }
.cb-yi-upload input[type=file] { font:inherit; font-size:16px; min-height:48px; padding:10px 0; max-width:100%; }
/* the "Choose File" button itself is a 44 px+ touch target (S7 live audit L1); two rules, as an unknown pseudo-element
   would void a shared selector list */
.cb-yi-upload input[type=file]::file-selector-button { font:inherit; font-size:16px; min-height:44px; padding:10px 16px; margin-right:12px;
  border:1px solid #c9ced3; border-radius:var(--radius); background:#fff; color:var(--navy); cursor:pointer; }
.cb-yi-upload input[type=file]::-webkit-file-upload-button { font:inherit; font-size:16px; min-height:44px; padding:10px 16px; margin-right:12px;
  border:1px solid #c9ced3; border-radius:var(--radius); background:#fff; color:var(--navy); cursor:pointer; }
.cb-yi-upload input[type=file]::file-selector-button:hover { background:#f1f3f5; }
/* collapsible list (not-on-site logins on the month page) */
.cb-yi-more { margin:0 0 16px; }
.cb-yi-more > summary { display:flex; align-items:center; min-height:44px; padding:8px 14px; margin:0 0 12px; background:#fff; border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); color:var(--ink); font:600 15px var(--head); cursor:pointer; }
.cb-yi-more:not([open]) > summary { margin-bottom:0; }
.cb-yi-more > summary::-webkit-details-marker { display:none; }
.cb-yi-more > summary::before { content:"+"; display:inline-block; width:18px; margin-right:8px; font:700 18px/1 var(--head); color:var(--title); }
.cb-yi-more[open] > summary::before { content:"\2212"; }
.cb-yi-upload .cb-check { display:flex; gap:10px; align-items:center; min-height:44px; font-weight:400; }
.cb-yi-upload .cb-check input { width:22px; height:22px; flex:0 0 auto; }
.cb-yi-problems { margin:8px 0 0; padding-left:20px; }
/* below 1000 px the bills and profit tables become labelled cards, like the customer list */
@media (max-width:999px) {
  .cb-yi-wrap { background:none; box-shadow:none; padding:0; }
  .cb-table.cb-yi thead { display:none; }
  .cb-table.cb-yi, .cb-table.cb-yi tbody { display:block; }
  .cb-table.cb-yi tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px 14px; background:#fff; border:0; border-radius:4px;
    padding:14px 16px; margin:0 0 12px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
  .cb-table.cb-yi td { display:block; padding:0; border:0; min-width:0; }
  .cb-table.cb-yi td[data-l]::before { content:attr(data-l); display:block; font:600 12px var(--head); text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:2px; }
  .cb-table.cb-yi td.cb-yi-who, .cb-table.cb-yi td.cb-yi-wide { grid-column:1 / -1; }
  .cb-table.cb-yi td.cb-yi-who { padding-bottom:8px; border-bottom:1px solid var(--line); }
  .cb-table.cb-yi td.cb-yi-who::before { display:none; }
  .cb-table.cb-yi .cb-num { text-align:left !important; white-space:normal; }
  .cb-table.cb-yi td a { display:inline-block; max-width:100%; padding:10px 0; }
  .cb-table.cb-yi td:empty { display:none !important; } /* no empty labelled cells in the total cards (S7 UI fix L1) */
  .cb-yi-total { background:var(--navy) !important; }
  .cb-yi-total td, .cb-yi-total td[data-l]::before { color:#fff !important; border:0; }
  .cb-yi-total .cb-yi-neg { color:#ffb3bd !important; } /* a loss on the navy total card: light red, 6:1 */
}
@media (max-width:599px) {
  .cb-table.cb-yi tr { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cb-table.cb-yi td { display:block !important; padding:0 !important; }
  .cb-table.cb-yi td[data-l]::before { position:static; width:auto; }
}

/* Order and shipping status (M2 S4): the customer's order card and the team's stage form */
.cb-vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.cb-order h3 { font-size:18px; }
.cb-order .cb-badge { border-radius:12px; line-height:1.4; padding:3px 10px; }
.cb-steps { list-style:none; margin:12px 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; counter-reset:cb-step; }
.cb-steps li { position:relative; padding:30px 4px 0; text-align:center; font-size:14px; line-height:1.3; color:#666; counter-increment:cb-step; overflow-wrap:anywhere; }
.cb-steps li::before { content:counter(cb-step); position:absolute; top:0; left:50%; transform:translateX(-50%); width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid #c9ced3; color:#666; font:700 13px/20px var(--head); box-sizing:border-box; }
.cb-steps li::after { content:""; position:absolute; top:11px; left:calc(50% + 16px); right:calc(-50% + 13px); height:2px; background:#c9ced3; }
.cb-steps li:last-child::after { display:none; }
.cb-steps .cb-step-done, .cb-steps .cb-step-now { color:var(--ink); }
.cb-steps .cb-step-done::before { content:"\2713"; background:var(--ok); border-color:var(--ok); color:#fff; }
.cb-steps .cb-step-done::after { background:var(--ok); }
.cb-steps .cb-step-now { font-weight:700; }
.cb-steps .cb-step-now::before { background:var(--navy); border-color:var(--navy); color:#fff; }
/* A step the team went past without setting it (UI audit S4 L2): no tick, dashed ring, "Skipped" under the name. */
.cb-steps .cb-step-skip::before { border-style:dashed; }
.cb-steps .cb-step-skip::after { background:var(--ok); }
.cb-step-note { display:block; font-size:12px; font-weight:400; color:#666; }
.cb-ord-err { margin:0 0 10px; font-weight:600; }
.cb-track { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; color:var(--ink); overflow-wrap:anywhere; }
.cb-track strong { font-family:var(--head); letter-spacing:.02em; }
.cb-hist-h { margin:14px 0 0; font:600 13px var(--head); text-transform:uppercase; letter-spacing:.03em; color:#666; }
.cb-ord-edit { margin:12px 0 0; }
.cb-ord-edit > summary { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid #c9ced3; border-radius:var(--radius);
  background:#fff; color:var(--navy); font:600 15px var(--head); cursor:pointer; list-style:none; }
.cb-ord-edit > summary::-webkit-details-marker { display:none; }
.cb-ord-edit[open] > summary { margin-bottom:8px; }
.cb-ord-form { padding:14px; background:var(--ground); border-radius:var(--radius); }
.cb-ord-form .cb-hint { color:#666; }
@media (max-width:599px) {
  .cb-ord-form .cb-field-pair { grid-template-columns:1fr; }
  .cb-steps li { font-size:13px; padding-left:0; padding-right:0; }
}

/* Signage setup (M2 S5): customer screens list, team retry list. */
.cb-screens { list-style:none; margin:12px 0 0; padding:0; }
.cb-screens li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:10px 0; border-bottom:1px solid #e6e8eb; min-height:44px; }
.cb-screens li:last-child { border-bottom:0; }
.cb-screen-name { min-width:0; overflow-wrap:anywhere; }
.cb-retry-list { list-style:none; margin:8px 0 0; padding:0; }
.cb-retry-list li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:10px 0; border-bottom:1px solid #f0e2c8; }
.cb-retry-list li:last-child { border-bottom:0; }
.cb-retry-list li > span { flex:1 1 280px; min-width:0; overflow-wrap:anywhere; }
.cb-inline { display:inline-block; }
@media (max-width:600px) {
  .cb-retry-list li > form, .cb-retry-list li > form > button { width:100%; }
}

/* Reseller model (M2 S6): checkout "I resell this", the customer selector, plans per customer. */
.cb-flash-info { background:#f1f7fd; color:var(--ink); border-left:4px solid var(--blue); }
.cb-resell { margin:12px 0 4px; padding:14px; background:var(--ground); border-radius:var(--radius); }
.cb-resell legend { float:left; width:100%; margin:0 0 4px; }
.cb-resell > .cb-check { clear:both; font-size:16px; }
.cb-rs-fields { display:flex; flex-direction:column; gap:8px; }
.cb-rs-fields[hidden] { display:none; }
.cb-rs-fields .cb-field-pair { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.cb-rs-fields textarea { font:inherit; font-size:16px; color:var(--ink); width:100%; padding:11px 12px; min-height:88px; border:1px solid #ccc; border-radius:4px; background:#fff; resize:vertical; }
.cb-rs-fields textarea:focus { border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(25,132,218,.2); }
.cb-rs-row { display:flex; gap:10px; align-items:stretch; }
.cb-rs-row select { flex:1 1 240px; min-width:0; }
/* Beats .cb-form button[type=submit] (100% wide, 12px top margin), which squeezed the select to 26px at 768+ (UI audit S6 H1). */
.cb-form .cb-rs-row button[type=submit] { flex:0 0 auto; width:auto; margin-top:0; }
.cb-rs-waiting p { margin:0 0 8px; }
.cb-rs-waiting p:last-child { margin-bottom:0; }
.cb-rs-plans li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; border-bottom:1px solid #e6e8eb; padding:10px 0; }
.cb-rs-plans li:last-child { border-bottom:0; }
.cb-rs-plans li > strong { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
.cb-rs-plans li > .cb-sub { flex:1 1 100%; order:3; margin:0; }
.cb-planpick { border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin:0 0 8px; }
.cb-planpick span { overflow-wrap:anywhere; }
@media (max-width:599px) {
  .cb-rs-fields .cb-field-pair { grid-template-columns:1fr; }
  .cb-rs-row { flex-direction:column; }
  .cb-rs-row select { flex:0 0 auto; }
  .cb-rs-row button, .cb-form .cb-rs-row button[type=submit], .cb-rs-plans .cb-btn { width:100%; }
}
/* Phone bill lists: an amount with its credit note ("$X paid, $Y from credit") sits at the right edge like every other
   row value, the note on its own line under it (live audit recheck L3). The team detail tables keep their left column. */
@media (max-width:599px) {
  .cb-table:not(.cb-lines) td[data-l="Amount"] { flex-wrap:wrap; column-gap:12px; row-gap:0; }
  .cb-table:not(.cb-lines) td[data-l="Amount"] > .cb-sub { flex:1 0 100%; text-align:right; margin-top:0; }
  .cb-dash-detail .cb-table:not(.cb-lines) td[data-l="Amount"] > .cb-sub { text-align:inherit; }
}
/* M2 S8: Activate page, Use your own TV, activation codes on the team pages. */
.cb-code { font-family:"Courier New", Courier, monospace; font-weight:700; letter-spacing:.06em; white-space:nowrap; color:var(--ink); }
/* Release / Disable: one even row that never wraps its button text, not even in WebKit tablet (S8 recheck L3). */
.cb-ac-acts form { flex:0 0 auto; display:inline-flex; margin:0; }
.cb-ac-acts form button { white-space:nowrap; }
@media (min-width:600px) {
  /* The Action column takes just its buttons' width, so the status line wraps instead of the buttons. */
  .cb-ac-codes td[data-l="Action"] { width:1%; white-space:nowrap; }
  .cb-ac-codes .cb-ac-acts { flex-wrap:nowrap; }
}
input.cb-code-in { font-family:"Courier New", Courier, monospace; font-size:20px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cb-ok-line { padding:10px 14px; border-radius:4px; background:var(--ok-bg); color:var(--ok); }
.cb-center { text-align:center; }
.cb-placeholder { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border:2px dashed #b9c2cc; border-radius:var(--radius); color:var(--muted); font-size:15px; }
.cb-tv-nav ul { list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cb-tv-nav a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid #c9ced3; border-radius:999px; background:#fff; color:var(--navy); text-decoration:none; font-size:15px; }
.cb-tv-nav a:hover { border-color:var(--navy); color:var(--navy); }
.cb-tv-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 20px; }
.cb-tv { display:flex; flex-direction:column; scroll-margin-top:16px; }
.cb-tv h2 { margin-top:0; font-size:19px; }
.cb-tv-steps { margin:0 0 8px; padding-left:22px; }
.cb-tv-steps li { margin:0 0 6px; }
.cb-tv .cb-actions { margin-top:auto; }
.cb-ac-codes td[data-l="Action"] form { margin:0; }
.cb-ac-acts { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
@media (max-width:767px) { .cb-tv-grid { grid-template-columns:1fr; } }
@media (max-width:599px) {
  .cb-tv-nav a { padding:8px 12px; font-size:14px; }
  .cb-ac-codes td[data-l="Action"]:empty { display:none; }
  /* Status on a phone: the badge stays one pill, its line goes under it (a long "Waiting for payment" line squeezed it). */
  .cb-ac-codes td[data-l="Status"] { flex-wrap:wrap; }
  .cb-ac-codes td[data-l="Status"] .cb-badge { flex:0 0 auto; white-space:nowrap; align-self:flex-start; }
  .cb-ac-codes td[data-l="Status"] .cb-sub { flex:1 1 100%; text-align:right; }
}
.cb-next { margin-top:24px; }