/* My Business: the headquarters (design kit 6). A glass bar on top, the deep-glass directory as the left
   rail (where you are, what's next, Find a feature), content in cards, status in good/warn/bad. Phone: 16 px
   gutters, bottom bar, WEBY button bottom-right.
   Apple-grade pass (Owner 23:20 UTC 2026-10-24: "look like Apple.com ui built it and organized it"): the system
   face (SF on Apple devices, Inter elsewhere), five type sizes, one card, one button family, one pill, grouped
   rows instead of walls. Still dark WebMade with the cyan accent. */
[hidden] { display: none !important; }
body.hq { display: block; place-items: initial; padding: 0; overflow-x: hidden; line-height: 1.47; letter-spacing: -.011em;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  /* the five type sizes: caption, footnote, body, title, large title */
  --fs-cap: 12px; --fs-note: 14px; --fs-body: 17px; --fs-title: 21px; --fs-hero: clamp(32px, 3.2vw, 40px);
  /* one card surface, one inner fill, one hairline */
  --surface: rgba(16,18,36,.78); --fill: rgba(255,255,255,.045); --fill2: rgba(255,255,255,.08); --hair: rgba(255,255,255,.09);
  --r-card: 20px; --r-row: 14px; --pad: 24px; --gap: 16px;
  --tint: rgba(95,227,216,.13); --tint2: rgba(95,227,216,.22); }
.hq h1, .hq h2, .hq h3, .hq h4 { letter-spacing: -.02em; }
.hq .note { font-size: var(--fs-note); line-height: 1.45; }

/* ---- one button family: tinted by default, cyan for the card's one primary action (.glow or the form's own
   submit), ghost for the rest. No lift on hover. Component rules further down still shape their own buttons. ---- */
.hq button, .hq .button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--tint); color: var(--hi); box-shadow: none; font: 600 15px/1.2 var(--body); letter-spacing: -.01em; transition: background .2s, color .2s, opacity .2s; }
.hq button:hover, .hq .button:hover { transform: none; background: var(--tint2); filter: none; }
.hq .ghost, .hq a.button.ghost, .hq label.button.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.16); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hq .ghost:hover, .hq a.button.ghost:hover { background: var(--fill); border-color: rgba(255,255,255,.28); }
.hq .glow, .hq a.button.glow, .hq button[type=submit]:not(.ghost) { background: var(--cyan); color: #04121a; border: 0; box-shadow: none; }
.hq .glow:hover, .hq a.button.glow:hover, .hq button[type=submit]:not(.ghost):hover { background: #86eee5; }
.hq button.small, .hq .button.small { min-height: 40px; padding: 0 16px; font-size: var(--fs-note); }
.hq button[disabled], .hq button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.hq .skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.hq .skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.hq[data-view=business] #brandbar { display: none; }
body.hq[data-view=business] .keyart::after { background: linear-gradient(180deg, rgba(5,5,12,.8), rgba(5,5,12,.9) 40%, rgba(5,5,12,.95)); }

/* ---- the glass bar ---- */
.hq-head { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 30; display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 10px 14px 10px 12px; border-radius: 18px; }
.hq-head::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px solid var(--hair); background: rgba(12,14,30,.72); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 12px 40px -24px rgba(0,0,0,.9); }
.hq-id { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1; }
.hq-id .mark { flex: none; width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(96,120,255,.55)); }
.hq-tag { margin: 0; font-size: var(--fs-cap); line-height: 1.2; color: var(--soft2); letter-spacing: 0; }
.hq-id h1 { margin: 2px 0 0; font: 600 var(--fs-title)/1.15 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.hq-id > div { min-width: 0; }
.hq-plan { margin: 3px 0 0; font-size: var(--fs-cap); display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; color: var(--soft2); min-width: 0; }
#biz-plan { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-plan .pill { margin-left: 0; }
.hq-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hq-actions { flex: none; }
.hq-actions button { min-height: 40px; padding: 0 18px; font-size: var(--fs-note); }
#weby-btn { padding-left: 8px; }
#weby-btn img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #0c1a4d; box-shadow: 0 0 0 1.5px rgba(95,227,216,.6); }

/* ---- the directory (left rail) ---- */
.directory { position: fixed; z-index: 25; left: 12px; top: 116px; width: 268px; max-height: calc(100svh - 128px); display: flex; flex-direction: column; border-radius: var(--r-card); color: var(--soft); background: rgba(12,14,30,.72); border: 1px solid var(--hair); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); overflow: auto; }
.dir-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--hair); }
.dir-label { display: block; font-size: var(--fs-cap); font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--label); margin: 0 0 4px; }
.dir-now { margin: 0; }
.dir-now b { display: block; font: 600 var(--fs-title)/1.2 var(--display); letter-spacing: -.02em; color: #fff; }
.dir-now small { display: block; font-size: var(--fs-cap); color: var(--soft2); margin-top: 2px; }
.dir-next { display: flex; align-items: center; min-height: 44px; margin: 6px 0 0; text-decoration: none; color: var(--soft); }
.dir-next b { font-size: 14px; font-weight: 600; }
.dir-next i { font-style: normal; color: var(--hi); margin-left: 4px; }
.dir-next:hover b, .dir-next:focus-visible b { color: var(--hi); }
.hq-tabs { display: grid; gap: 2px; padding: 8px; counter-reset: sec; }
.hq-tabs a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 12px; text-decoration: none; color: var(--soft); font-weight: 500; font-size: 15px; }
/* Each section's icon (a mask over currentColor, so it follows the text colour); the icons are set at the end. */
.hq-tabs a::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; opacity: .9; }
.hq-tabs a:hover { background: var(--fill); color: #fff; }
.hq-tabs a[aria-current=page] { color: #fff; background: var(--fill2); font-weight: 600; }
.hq-tabs a[aria-current=page]::before { color: var(--hi); opacity: 1; }
.dir-find { padding: 14px 18px 18px; border-top: 1px solid var(--hair); }
.dir-find input { min-height: 40px; font-size: 15px; padding: 8px 12px; border-radius: 10px; border-color: transparent; background: var(--fill2); }
.dir-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.dir-results a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); color: #e5ebff; font-size: 14px; text-decoration: none; }
.dir-results a:hover, .dir-results a:focus-visible { background: rgba(127,240,255,.12); color: #fff; }
.dir-results em { font-style: normal; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }

/* ---- page frame ---- */
#main { max-width: 1180px; margin: 0 auto; padding: 108px 16px 96px; outline: none; }
body.hq[data-view=business] #main { max-width: 1140px; margin-left: 300px; margin-right: auto; padding: 124px 32px 96px 20px; }
#main .gate { margin: 4vh auto 40px; }
.sec > h2 { font: 700 var(--fs-hero)/1.1 var(--display); letter-spacing: -.025em; margin: 4px 0 20px; outline: none; }
.sec > h2:focus, .sec > h2:focus-visible { outline: none; }
.sec > .note { margin: -12px 0 20px; font-size: var(--fs-body); color: var(--soft2); max-width: 70ch; }
/* The card: one surface, one hairline, one radius, generous padding, no gradient. */
.panel { position: relative; min-width: 0; margin: var(--gap) 0; padding: var(--pad); border-radius: var(--r-card); border: 1px solid var(--hair); background: var(--surface); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.panel h3, .panel h4 { margin: 0 0 10px; }
.panel h3 { font: 600 var(--fs-title)/1.25 var(--display); letter-spacing: -.02em; }
.panel h4 { font: 600 var(--fs-body)/1.3 var(--display); margin-top: 20px; }
.panel > h3 + .note { margin-top: -4px; }
/* At most two across, and a full-width calendar never leaves Orders alone on its own row (Owner 08:38 UTC 2026-10-16). */
.grid2 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc(50% - 8px))), 1fr)); grid-auto-flow: dense; }
.grid2 > .panel { margin: 0; }
.grid2 > #calendar-box { grid-column: 1 / -1; }
/* One pill: 22 px, tinted by state, never outlined. */
.pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font: 600 var(--fs-cap)/1 var(--body); letter-spacing: 0; border: 0; color: var(--soft2); background: var(--fill2); margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.pill.ok { color: #86efac; background: rgba(74,222,128,.14); }
.pill.found { color: #fcd34d; background: rgba(251,191,36,.15); }
.pill.bad { color: #fda4af; background: rgba(251,113,133,.16); }
.pill.demo { background: var(--warn); color: #140f05; }
.note { overflow-wrap: anywhere; }
.signout { text-align: center; margin-top: 32px; }
.signout a, #m-signout { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.sec h2, .panel, [id] { scroll-margin-top: 110px; }
small, .small { font-size: .88rem; }
.row button, .row .button, .row label.button { min-height: 40px; padding: 0 16px; font-size: var(--fs-note); }
h2 { font-size: 1.2rem; margin: 28px 0 8px; }

/* ---- lists and facts ---- */
.fields, .list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } /* one column that never outgrows the page (Owner 08:38 UTC 2026-10-16) */
/* Facts are one grouped list, like Settings: rows on one fill, a hairline between, the row's action on the right. */
ul.fields { gap: 0; border-radius: var(--r-row); background: var(--fill); overflow: hidden; }
ul.fields > li { padding: 14px 16px; }
ul.fields > li + li { border-top: 1px solid var(--hair); }
.field { border-radius: var(--r-row); padding: 14px 16px; background: var(--fill); }
ul.fields > .field { border-radius: 0; background: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
ul.fields > .field > * { grid-column: 1 / -1; }
ul.fields > .field > :is(.label, .value, .src) { grid-column: 1; }
ul.fields > .field > .label + .value + .row, ul.fields > .field > .label + .value + .src + .row, ul.fields > .field > .label + .row { grid-column: 2; grid-row: 1 / span 3; margin: 0; justify-content: flex-end; }
ul.fields > .field > p.note:empty { display: none; }
.field .label { font-size: var(--fs-note); font-weight: 500; color: var(--soft2); }
.field .value { color: var(--ink); margin: 2px 0 0; word-break: break-word; font-size: var(--fs-body); }
.field .src { font-size: var(--fs-cap); color: var(--label); overflow-wrap: anywhere; }
.field.missing .value { color: #fda4af; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.list a { display: flex; align-items: center; min-height: 56px; padding: 10px 16px; border-radius: var(--r-row); border: 1px solid transparent; background: var(--fill); color: var(--ink); text-decoration: none; font-weight: 600; }
.list a:hover, .list a:focus-visible { background: var(--fill2); border-color: rgba(95,227,216,.4); }
#onboarding .guided { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 4px 0 6px; }
.leads li { padding: .7rem 0; border-bottom: 1px solid rgba(140,185,255,.12); }
.leads p { margin: .25rem 0; white-space: pre-wrap; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows li { padding: 12px 0; border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; color: var(--soft); }
.rows li:last-child { border-bottom: 0; }
.rows a, .panel a:not(.button), dialog a:not(.button) { color: var(--hi); }
.ref { color: var(--muted); font-size: .8rem; }
.pics { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .pics img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; display: block; }
.offers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.offer { border-radius: var(--r-row); padding: 20px; background: var(--fill); border: 1px solid transparent; }
.offer.proven { border-color: rgba(95,227,216,.4); }
.offer h4 { margin: 0 0 6px; font: 600 var(--fs-body)/1.3 var(--display); }
.offer .proof { margin: 6px 0; font-weight: 600; color: var(--ink); }
.offer ul { margin: 8px 0 12px; padding-left: 18px; } .offer li { margin: 3px 0; }

/* ---- Today: the Business Briefing ---- */
.briefing { margin: 0 0 16px; display: grid; gap: 14px; }
.brief-hello { font: 600 var(--fs-title)/1.2 var(--display); letter-spacing: -.02em; margin: -8px 0 0; color: var(--soft); }
/* The Today skeleton while the page data loads (public/my-business.js shell()): quiet bars where the briefing goes. */
.brief-skel { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: var(--navy); border: 1px solid var(--glassline); }
.brief-skel .sk { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06)); background-size: 200% 100%; animation: sk-shine 1.4s ease-in-out infinite; }
.brief-skel .sk:nth-child(1) { width: 46%; height: 20px; }
.brief-skel .sk:nth-child(2) { width: 92%; }
.brief-skel .sk:nth-child(3) { width: 78%; }
.brief-skel .sk:nth-child(4) { width: 85%; }
.brief-skel .sk:nth-child(5) { width: 60%; }
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.brief-status { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--good); font-weight: 600; }
.brief-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.brief-status.needs_you { color: var(--warn); }
.brief-status.attention { color: var(--bad); font-weight: 700; }
.brief-block { min-width: 0; border-radius: var(--r-card); padding: var(--pad); border: 1px solid var(--hair); background: var(--surface); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.brief-block h3 { margin: 0 0 10px; font: 600 var(--fs-title)/1.25 var(--display); letter-spacing: -.02em; }
.brief-block ul { margin: 0; padding-left: 20px; }
.brief-block li { margin: 6px 0; color: var(--soft); }
.brief-block li a:not(.button) { color: var(--hi); }
.brief-block li[data-level=high] { font-weight: 600; }
.brief-block li[data-level=critical] { font-weight: 700; color: #ffc2cc; }
.brief-block.needs { border-color: rgba(95,227,216,.28); }
.brief-block.attention { border-color: rgba(251,113,133,.45); background: linear-gradient(180deg, rgba(251,113,133,.1), rgba(16,18,36,.78)); }
.brief-block.attention ul { padding-left: 0; list-style: none; }
.brief-block.attention li { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.brief-block.attention li:last-child { border-bottom: 0; }
.brief-block.attention .button { justify-self: start; }
.brief-next { border-color: rgba(95,227,216,.28); }
.brief-next .rec, .rec { color: #fff; font-weight: 600; margin: 4px 0; font-size: var(--fs-body); }
.brief-next .button { margin-top: 8px; }
.stages { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.stages li { display: flex; gap: 12px; align-items: flex-start; }
.stages li p { margin: 2px 0 0; }
.stages li strong { font-family: var(--display); font-weight: 600; font-size: var(--fs-body); }
.stages li p { font-size: var(--fs-note); }
.stage-key { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(140,185,255,.35); font: 700 13px/1 var(--display); color: var(--label); }
.stages li.done .stage-key { background: var(--cyan); border-color: var(--cyan); color: #04121a; }
.stages li.current .stage-key { border-color: var(--hi); color: #fff; box-shadow: 0 0 14px rgba(127,240,255,.55); }
/* Counts with their definitions (Today: "WEBY this month", today's numbers). Zero reads "0". */
.nums { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.nums li { margin: 0; padding: 16px 18px; border-radius: var(--r-row); border: 0; background: var(--fill); color: var(--soft); }
.nums li strong { display: block; font: 700 var(--fs-hero)/1.05 var(--display); color: #fff; letter-spacing: -.03em; margin-bottom: 4px; }
.nums li .what { display: block; font-size: var(--fs-cap); line-height: 1.4; color: var(--label); margin-top: 6px; }
.health { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font: 500 var(--fs-cap)/1 var(--body); border: 0; color: var(--soft2); background: var(--fill2); }
.chip.ok { color: #86efac; background: rgba(74,222,128,.12); }
.chip.bad { color: #fda4af; background: rgba(251,113,133,.16); font-weight: 600; }
.brief-block.review .review-clock { font: 600 22px/1.2 var(--display); color: #fff; margin: .25rem 0; }

/* ---- Customers ---- */
.filters { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
/* Customers → Reviews and Post-Pay (desktop only: the phone bar has Reviews). */
.cust-reviews { margin: 0 0 12px; }
.cust-reviews { font-size: var(--fs-body); }
.cust-reviews a { color: var(--hi); font-weight: 600; text-decoration: none; }
.cust-reviews a:hover, .cust-reviews a:focus-visible { text-decoration: underline; }
.people { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.people { gap: 0; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hair); overflow: hidden; }
.people > li + li { border-top: 1px solid var(--hair); }
.people > li.note { padding: 16px var(--pad); margin: 0; }
.person details { border-radius: 0; padding: 4px var(--pad); border: 0; background: none; }
.person details[open] { background: var(--fill); }
.person summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 52px; color: #fff; list-style-position: inside; overflow-wrap: anywhere; }
.person .contact { display: flex; gap: 14px; flex-wrap: wrap; }
.person .contact a { color: var(--hi); display: inline-flex; align-items: center; min-height: 44px; min-width: 0; overflow-wrap: anywhere; }
.stagebar { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0; }
.stagebar li { font: 600 var(--fs-cap)/1 var(--body); display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--fill2); color: var(--label); }
.stagebar li.done { background: var(--tint); color: var(--hi); }
.timeline { list-style: none; padding: 0 0 0 14px; margin: 8px 0 12px; border-left: 2px solid rgba(140,185,255,.2); }
.timeline li { margin: 8px 0; display: grid; gap: 2px; color: var(--soft); }
.timeline time { font-size: .82rem; color: var(--label); }
.assign { margin: 4px 0 12px; }

/* ---- Operations, Growth: numbers in the display face ---- */
.pay h4 { margin: 0 0 6px; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin: 4px 0 14px; }
.tile { border-radius: var(--r-card); padding: 20px 22px; display: grid; gap: 4px; align-content: start; border: 1px solid var(--hair); background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.tile-l { font-size: var(--fs-note); font-weight: 500; letter-spacing: 0; color: var(--soft2); }
.tile strong { font: 700 var(--fs-hero)/1.05 var(--display); letter-spacing: -.03em; color: #fff; }
.tile .note { font-size: var(--fs-cap); }
.big { font: 700 var(--fs-hero)/1.1 var(--display); color: #fff; letter-spacing: -.03em; }
.spark { display: block; width: 100%; max-width: 320px; height: 48px; color: var(--hi); margin: 8px 0 0; }

/* ---- Systems ---- */
.table-wrap { overflow-x: auto; max-width: 100%; }
.caps { width: 100%; border-collapse: collapse; }
.caps th, .caps td { text-align: left; padding: 9px 6px; border-bottom: 1px solid rgba(140,185,255,.12); vertical-align: top; color: var(--soft); }
.caps th { font-weight: 500; color: var(--label); }
li.member { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
li.member .who { overflow-wrap: anywhere; color: #fff; }
li.member select { width: auto; }
.invite { display: grid; gap: 10px; margin-top: 14px; text-align: left; }
.roles { margin: 12px 0; } .roles summary { cursor: pointer; color: var(--hi); min-height: 44px; display: flex; align-items: center; }
.change { color: var(--soft); }
#history .pill { justify-self: start; }

/* ---- dialogs: welcome/dialog glass, 44 px close ---- */
dialog { width: min(660px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto; border: 0; border-radius: 24px; padding: 28px; color: var(--ink); background: rgba(16,18,36,.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 0 0 1px var(--hair), 0 30px 80px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(3,6,20,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog h2 { margin: 4px 0 12px; font: 700 28px/1.15 var(--display); letter-spacing: -.025em; }
.dlg-x { float: right; margin: 0 0 0 8px; display: block; }
.dlg-x button, button.dlg-x { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; font-size: 20px; }
dialog form:not(.dlg-x) { margin-top: 8px; }
/* Fixed columns, and words break only when one can't fit its column: "(Saturday)" stays whole. */
.diff { width: 100%; border-collapse: collapse; margin: 8px 0; table-layout: fixed; }
.diff th, .diff td { text-align: left; padding: 8px 6px; border-bottom: 1px solid rgba(140,185,255,.14); vertical-align: top; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.places { padding-left: 18px; } .places li.auto { color: var(--hi); } .places li.team { color: #ffe08a; }
.warn { color: #ffe08a; font-weight: 600; }
.done { color: var(--good); font-weight: 600; }
.asks { display: grid; gap: 8px; margin: 10px 0; }
.asks button { justify-content: flex-start; text-align: left; min-height: 48px; }
.answer { color: #fff; min-height: 1.5em; }
#refund-dlg { max-width: 580px; }
#refund-dlg .chat-log { max-height: 45vh; overflow-y: auto; margin: .75rem 0; display: grid; gap: .5rem; }
#refund-dlg .msg { margin: 0; padding: .7rem .9rem; border-radius: 14px; background: rgba(255,255,255,.06); color: var(--soft); }
#refund-dlg .msg.client { justify-self: end; background: rgba(95,227,216,.14); }

/* ---- More (phone) ---- */
.more { list-style: none; padding: 0; display: grid; gap: 10px; }
.more { gap: 0; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--hair); overflow: hidden; }
.more > li + li { border-top: 1px solid var(--hair); }
.more a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 20px; color: #fff; text-decoration: none; font: 500 var(--fs-body)/1.2 var(--body); }
.more a::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); transform: rotate(-45deg); }

/* ---- Sign-in, the member view (before purchase), the business picker ---- */
.hq #signin { max-width: 540px; }
.hq #signin .weby { margin: 0 auto 8px; display: block; }
.hq #signin h1 { font-size: clamp(30px, 4vw, 42px); }
.hq #signin .lede { margin: 0 auto 4px; font-size: 16.5px; }
.hq #signin form button, .hq #signin form .button { width: 100%; }
.gate .or { display: flex; align-items: center; gap: .75rem; color: var(--label); margin: 1.25rem 0 .25rem; }
.gate .or::before, .gate .or::after { content: ""; flex: 1; border-top: 1px solid rgba(255,255,255,.12); }
.hq #member { max-width: 1060px; text-align: left; padding: clamp(24px, 4vw, 44px); }
.hq #member > .weby { display: block; margin: 0 0 12px; }
.hq #member h1 { margin: 12px 0 4px; font-size: clamp(32px, 4.4vw, 52px); }
.hq #member .m-next { margin: 20px 0 22px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(18,30,78,.74), rgba(8,12,40,.66)); border: 1px solid rgba(127,240,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 48px rgba(0,0,0,.4); }
.hq #member .m-next::before { content: "Your next step"; display: block; font: 600 12px/1.2 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.hq #member .m-step { font: 600 clamp(19px, 2vw, 23px)/1.3 var(--display); color: #fff; margin: 0 0 14px; }
.hq #member .m-next .button { background: var(--wm-cta); color: #04202a; box-shadow: var(--wm-glow); }
.hq #member .m-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.hq #member .m-grid .panel { margin: 0; }
.hq #member .m-grid h2 { font-size: 19px; margin: 0 0 8px; }
.hq #member .m-big { font: 700 clamp(30px, 3vw, 38px)/1.1 var(--display); letter-spacing: -.02em; margin: .25rem 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hq #member #m-ref { display: grid; gap: 8px; }
.hq #picker { max-width: 560px; }

/* ---- Touch Studio: black and gold, like the cards ---- */
.touch { margin: 8px 0 24px; padding: 18px; border-radius: 18px; background: linear-gradient(160deg, #120d05, #060504); border: 1px solid rgba(212,164,67,.45); color: #f7f1e3; }
.touch h3 { color: #f3d78a; margin: 16px 0 8px; font-size: 1rem; }
.touch .note { color: #e2bd6a; }
.touch .field { background: rgba(255,236,190,.04); border-color: rgba(212,164,67,.35); }
.touch .field .label { color: #f7f1e3; }
.touch .field.touch-suspended, .touch .field.touch-replaced { opacity: .6; }
.touch button { background: linear-gradient(180deg, #f3d78a, #d9ad4f 60%, #b98a33); color: #140f05; box-shadow: none; }
.touch .ghost, .touch .row .ghost { background: transparent; color: #f7f1e3; border: 1px solid rgba(212,164,67,.5); }
.touch select, .touch input { background-color: #0d0b07; border-color: rgba(212,164,67,.4); color: #f7f1e3; }
.touch input:not([type=file]) { background-image: none; }
.touch .row select { width: auto; min-width: 160px; }
.touch-row, .touch-form { display: grid; gap: 8px; margin: 8px 0; }
.touch-shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.touch-packs { display: grid; gap: 8px; margin: 8px 0; }
.touch-pack { display: block; padding: 10px 12px; border: 1px solid rgba(212,164,67,.35); border-radius: 12px; cursor: pointer; }
.touch-pack input { width: auto; min-height: 0; }
.touch-total { font-weight: 700; color: #f3d78a; }

/* ---- phone bottom bar ---- */
.bottom { display: none; }

/* middle widths: the directory becomes a strip of section tabs under the bar */
@media (max-width: 1099px) and (min-width: 721px) {
  .directory { left: 12px; right: 12px; top: 114px; width: auto; max-height: none; flex-direction: row; align-items: center; overflow: visible; }
  .dir-head, .dir-find { display: none; }
  .hq-tabs { display: flex; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
  .hq-tabs a { white-space: nowrap; }
  body.hq[data-view=business] #main { margin-left: auto; margin-right: auto; padding: 186px 16px 96px; }
  .sec h2, .panel, [id] { scroll-margin-top: 180px; }
}

@media (max-width: 720px) {
  .directory { display: none; }
  .hq-head { position: sticky; top: 8px; margin: 8px 8px 0; left: auto; right: auto; min-height: 60px; padding: 8px 8px 8px 10px; gap: 10px; }
  .hq-id .mark { width: 32px; height: 32px; }
  .hq-id h1 { font-size: var(--fs-body); }
  .hq-tag { font-size: 11.5px; }
  .hq-plan { font-size: 12.5px; }
  .hq-actions { flex-wrap: nowrap; }
  #change-btn { min-height: 40px; padding: 0 14px; font-size: var(--fs-note); }
  /* WEBY: 62 px, bottom-right, above the bar; nothing sits under it */
  #weby-btn { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 32; width: 62px; height: 62px; min-height: 62px; padding: 0; border-radius: 50%; border: 1px solid rgba(127,240,255,.45); background: rgba(8,12,34,.86); box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 4px rgba(95,227,216,.08); }
  #weby-btn img { width: 56px; height: 56px; box-shadow: none; }
  #weby-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.hq:not([data-view=business]) #weby-btn { display: none; }
  #main, body.hq[data-view=business] #main { margin: 0 auto; padding: 18px 16px calc(176px + env(safe-area-inset-bottom)); }
  body.hq:not([data-view=business]) #main { padding-top: 84px; }
  body.hq { --pad: 20px; --gap: 14px; }
  .sec > h2 { font-size: 34px; margin-top: 12px; }
  .sec > .note { font-size: var(--fs-note); }
  .hq button.small, .hq .button.small, .row button, .row .button { min-height: 44px; }
  .sec h2, .panel, [id] { scroll-margin-top: 92px; }
  .bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 30; padding: 4px; border-radius: 26px; background: rgba(12,14,30,.78); border: 1px solid var(--hair); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 16px 40px rgba(0,0,0,.55); }
  .bottom[hidden] { display: none; }
  .bottom a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 56px; padding: 4px 2px; color: var(--soft2); text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: 0; border-radius: 22px; }
  /* The tab icon is a mask over currentColor; the glyph stays in the page for anything that reads it. */
  .bottom a .ico { display: block; width: 24px; height: 24px; font-size: 0; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  .bottom a[aria-current=page] { color: var(--hi); background: var(--fill2); }
  .filters { grid-template-columns: 1fr; }
  .cust-reviews { display: none; }
  li.member { grid-template-columns: 1fr auto; }
  li.member .who { grid-column: 1 / -1; }
  .hq #member { padding: 22px 16px; }
}
@media (min-width: 721px) { #sec-more { display: none; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
/* Change-request queue (team screen) */
.queue .queue-item { display: grid; gap: 6px; }
.queue .queue-item.overdue { border-left: 3px solid rgba(251,113,133,.7); padding-left: 10px; }
.queue .row { flex-wrap: wrap; gap: 8px; }
.queue input[type="date"] { min-height: 44px; }
.queue .row { align-items: flex-end; }
.queue .qf { display: grid; gap: 4px; flex: 1 1 180px; max-width: 280px; font-size: 12.5px; font-weight: 600; color: var(--soft2); }
.queue .qf select, .queue .qf input { min-height: 44px; font-size: 15px; padding-top: 8px; padding-bottom: 8px; }

/* Calendar (day/week). WCAG 2.2: 24px minimum targets, focus never hidden under the sticky header or
   bottom bar, every move done with buttons (no drag-only). */
html { scroll-padding-top: 96px; scroll-padding-bottom: 88px; }
#calendar .cal-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
#calendar .cal-range { margin: 0; flex: 1 1 auto; font: 600 16px/1.2 var(--display); color: #fff; }
#calendar .cal-nav { display: inline-flex; gap: 6px; }
#calendar .cal-nav button { min-height: 40px; padding: 0 14px; }
#calendar .cal-nav button:disabled { opacity: .45; cursor: default; }
#calendar .seg button { min-height: 36px; }
#calendar .cal-day { margin: 10px 0 4px; font-size: 14px; }
#calendar .cal-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(140,185,255,.15); }
/* The 24px target floor carries no weight (:where), so it never shrinks a button below the app's own height. */
:where(#calendar) :where(button, select, input, label.radio) { min-height: 24px; min-width: 24px; }
/* Every control on a booking row and its job panel is one height, buttons and the Directions link alike. */
#calendar :is(.cal-act, .job) :is(button, a.button, select), #calendar .slots button { min-height: 44px; }
#calendar :is(.cal-act, .job) :is(button, a.button) { padding: 0 18px; font-size: 15px; }
#calendar .cal-act { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
#calendar .slots { display: flex; flex-wrap: wrap; gap: 6px; }
#calendar :focus-visible { outline: 3px solid #7fd0ff; outline-offset: 2px; }

/* ---- Social Cinema (Growth): one quiet row, Apple-plain ---- */
.cinema-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 4px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(5,9,30,.55); border: 1px solid var(--glassline); }
.seg button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: 14px; font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--bg); }
.seg button:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
.cinema-row a.button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; }
.cinema-order { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--glassline); }
.brief-block.review h3 { display: flex; align-items: center; gap: 10px; }
.brief-block.review .mbg-ico { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 4px 14px rgba(240,190,80,.35)); }

/* Employees (My Business) */
.staff-head { display: grid; gap: 6px; margin-bottom: 12px; }
.staff-num { margin: 0; font-size: 1.05rem; }
.staff-num strong { font-size: 2.2rem; line-height: 1; color: var(--accent, #22d3ee); margin-right: 4px; }
.staff-count .row { gap: 8px; align-items: center; }
.staff-count-in { max-width: 120px; }
.staff-list .member { flex-wrap: wrap; }
.staff-list .member .note { flex-basis: 100%; }
.staff-form .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }

/* WEBY Bookkeeping (My Business) */
.books-bar { gap: 8px; align-items: center; margin-bottom: 10px; }
.books-pl { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.books-pl caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.books-pl th, .books-pl td { padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 400; }
.books-pl td { text-align: right; font-variant-numeric: tabular-nums; }
.books-pl tr.sum th, .books-pl tr.sum td { font-weight: 700; }
.books-q li { display: grid; gap: 6px; }

/* One question at a time (Today) */
.ask-card h3 { margin: 4px 0; }
.ask-acts { flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ask-acts .chip.on { background: var(--accent, #22d3ee); color: #001018; }
.ask-acts input[type="text"] { flex: 1 1 220px; }

/* Post-Purchase Experience (renderPostpay) */
.pp-tabs { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pp-tabs button.on { border-color: var(--cyan, #22d3ee); color: var(--cyan, #22d3ee); }
#postpay .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 8px 0; }
#postpay .stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px; }
#postpay .stat strong { font-size: 1.25rem; }
#postpay .pp-num { display: block; margin: 8px 0; }
#postpay .pp-num input { width: 6em; margin-left: 6px; }
#postpay .panel { margin-top: 10px; }

/* Calendar forecast and the Ascend job manager */
#calendar .cal-wx { margin-left: 10px; font-weight: 500; font-size: 12.5px; color: var(--soft2); display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
#calendar .cal-wx img { width: 20px; height: 20px; }
#calendar .cal-wx.wet { color: #ffe08a; }
#calendar .job { flex-basis: 100%; display: grid; gap: 10px; margin: 6px 0 4px; padding: 14px; border: 1px solid rgba(127,240,255,.28); border-radius: 16px; background: rgba(8,14,30,.45); }
#calendar .job .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#calendar .job input[type=text] { flex: 1 1 200px; min-width: 0; }
#calendar .job-clock { margin: 0; font: 700 18px/1.2 var(--display, inherit); font-variant-numeric: tabular-nums; }
#calendar .job-photos { display: flex; flex-wrap: wrap; gap: 6px; }
#calendar .job-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; }
#calendar .job-notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
#calendar .job-bill { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 420px; font-variant-numeric: tabular-nums; }
#calendar .job-bill li { display: flex; justify-content: space-between; gap: 12px; }
#calendar .job-bill li.total { border-top: 1px solid rgba(140,185,255,.25); padding-top: 6px; font-size: 16px; }
#calendar .job-edit { display: grid; gap: 6px; max-width: 420px; }
#calendar .job-edit summary { cursor: pointer; font-weight: 600; }
/* Quote Brain requests (photos, video, the takeoff and the owner's quote editor). */
.qb-video { display: block; width: 100%; max-width: 420px; border-radius: 12px; margin: 8px 0; background: #000; }
.qb-k { margin: 10px 0 2px; font-weight: 600; }
.qb-list { margin: 0 0 4px; padding-left: 20px; }
.qb-scroll { overflow-x: auto; margin-top: 10px; }
.qb-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.qb-table th, .qb-table td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 1px solid rgba(140,185,255,.12); }
.qb-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--label, inherit); }
.qb-edit { margin-top: 12px; }
.qb-edit summary, #quotebrain summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.qb-rows { display: grid; gap: 8px; margin: 8px 0; }
.qb-row { display: grid; grid-template-columns: minmax(0, 1fr) 5em 7em auto; gap: 6px; align-items: center; }
.qb-row input { min-height: 44px; min-width: 0; }
.qb-total input { width: 8em; margin-left: 4px; }
.qb-set { display: block; margin: 8px 0; }
.qb-set input { width: 8em; margin-left: 6px; min-height: 44px; }
@media (max-width: 560px) { .qb-row { grid-template-columns: 1fr 4.5em 6em; } .qb-row button { grid-column: 1 / -1; justify-self: start; } }

/* ---- WebMade Owner: margin by plan (picker view) ---- */
.margins-month { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px; color: var(--label); font-weight: 600; }
.margins-month input { min-height: 44px; width: auto; }
.margins-total { margin: 4px 0 12px; color: var(--ink); font-weight: 600; }
.margins { display: grid; gap: 8px; }
.margin-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em 7.5em 7.5em 5em; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.margin-row > span:not(:first-child) { text-align: right; }
.margin-head { padding: 0 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--label); }
.margin-plan { border-radius: 14px; border: 1px solid var(--glassline); background: rgba(255,255,255,.04); }
.margin-plan > summary { cursor: pointer; min-height: 52px; padding: 8px 16px; list-style: none; color: var(--ink); }
.margin-plan > summary::-webkit-details-marker { display: none; }
.margin-plan[open] > summary { border-bottom: 1px solid rgba(140,185,255,.12); }
.margin-plan > .table-wrap { padding: 4px 12px 12px; }
.margin-name { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.margins .good { color: var(--good); font-weight: 700; }
.margins .bad { color: #ffc2cc; font-weight: 700; }
@media (max-width: 560px) {
  .margin-row { grid-template-columns: minmax(0, 1fr) 6.5em; }
  .margin-row > span:nth-child(2), .margin-row > span:nth-child(3) { display: none; }
  .margin-head { display: none; }
}
/* Results gallery */
.res-list { display: grid; gap: 12px; }
.res-item { display: grid; gap: 6px; }
.res-item .pics img, .res-empty { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; }
.res-empty { display: inline-grid; place-items: center; border: 1px dashed var(--line); font-size: 12px; color: var(--soft2); }
.res-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.res-what p { flex-basis: 100%; margin: 0; }
.res-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.res-form { display: grid; gap: 8px; max-width: 520px; }
.res-consent { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.res-consent input { width: 22px; height: 22px; }
.res-pick button { padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; line-height: 0; }
.res-pick button[aria-checked=true] { border-color: var(--hi); }
/* Growth ad campaign plans (lib/campaigns.js) */
.campaign > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.campaign-edit { display: grid; gap: 8px; margin: 10px 0; }
.campaign-edit input, .campaign-edit textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

@media (max-width: 720px) { .legal-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* Tutorial films beside what they explain (Owner 08:38 UTC 2026-10-16). */
p.films { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 6px 0; }
p.films:not(:has(.wm-tut-link:not([hidden]))) { display: none; }
/* Phones: each routing reason above its full-width choice, so no option text is cut (Owner 08:38 UTC 2026-10-16). */
@media (max-width: 720px) { .caps.routes tr { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid rgba(140,185,255,.12); } .caps.routes th, .caps.routes td { display: block; padding: 0; border: 0; } .caps.routes select, .caps.routes input { width: 100%; } }

/* Evidence labels (lib/evidence.js): a small quiet tag; the method opens on hover (title), tap or keyboard. */
.ev { display: inline-block; position: relative; vertical-align: baseline; margin-left: 4px; }
.ev > summary { list-style: none; display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font: 600 11.5px/1 var(--body); letter-spacing: .01em; cursor: pointer; border: 1px solid var(--glassline); color: var(--soft2); background: rgba(255,255,255,.04); white-space: nowrap; }
.ev > summary::-webkit-details-marker { display: none; }
.ev > summary:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
.ev-measured > summary { border-color: rgba(74,222,128,.35); color: #bff5d2; }
.ev-owner > summary { border-color: rgba(127,240,255,.35); color: #c8f7ff; }
.ev-estimated > summary { border-color: rgba(251,191,36,.4); color: #fde3a1; border-style: dashed; }
.ev-unchecked > summary { border-color: rgba(201,211,247,.3); color: var(--soft2); background: transparent; }
.ev-how { position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); width: max-content; max-width: min(320px, 80vw); padding: 8px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; font-weight: 400; color: var(--soft); background: var(--card); border: 1px solid var(--glassline); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.unchecked-box { margin-top: 10px; }
.unchecked-box > summary { cursor: pointer; color: var(--soft2); font-size: 14px; }
.brief-block ul.unchecked { list-style: none; padding-left: 0; }
/* What we improved (lib/improvements.js) */
.improved { list-style: none; padding: 0; }
.improved .improvement p { margin: 4px 0; }
.improved .improvement time { font-size: .82rem; color: var(--label); }
.improved .improvement .pill { margin-left: 8px; }

/* QR Studio (public/qr-studio.js): the code is always shown on white, as it prints. */
.qr-studio h4 { margin: 18px 0 8px; }
.qr-make { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) { .qr-make { grid-template-columns: minmax(0, 1fr) 240px; } }
.qr-inputs, .qr-fields { display: grid; gap: 8px; }
.qr-check { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.qr-color { display: flex; gap: 10px; align-items: center; }
.qr-color .qr-swatch { width: 52px; min-width: 52px; padding: 4px; }
.qr-color input:not(.qr-swatch) { max-width: 160px; }
.qr-warn { color: #ffc2cc; }
.qr-tile { margin: 0; padding: 12px; border-radius: 18px; background: #fff; text-align: center; position: sticky; top: 12px; }
.qr-tile .note { color: #6e6e73; margin: 6px 0 0; }
.qr-preview { width: 100%; height: auto; display: block; }
.qr-item { display: flex; gap: 14px; align-items: flex-start; }
.qr-thumb { width: 96px; height: 96px; flex: none; border-radius: 12px; background: #fff; padding: 6px; object-fit: contain; }
.qr-body { min-width: 0; flex: 1; }
.qr-body .row select { width: auto; min-width: 150px; }
.qr-pw { max-width: 240px; }
.qr-locked { padding: 18px; border-radius: 16px; border: 1px dashed rgba(140,185,255,.35); }
.qr-lock-title { font-weight: 700; font-size: 17px; margin: 0 0 6px; }
@media (max-width: 520px) { .qr-item { flex-direction: column; } }
/* What WEBY changed today (lib/webymode.js) */
.weby-today .weby-line { margin: 0 0 8px; line-height: 1.45; }
.weby-today .weby-line a { margin-left: 4px; font-size: 14px; }
.weby-today ul.weby-asks { list-style: none; padding: 0; margin: 0 0 10px; }
.weby-today ul.weby-asks li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid var(--glassline); }
.weby-today .weby-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.weby-today .weby-mode .note { flex: 1 1 220px; margin: 0; }
.weby-today .weby-lang-label { font-weight: 600; }

/* Sweep 2026-10-18: phone tap targets (44 px) for the segmented switches and the calendar; the admin-only
   detail never widens the page; the tagline gives the phone bar its room back. */
@media (max-width: 720px) {
  .seg button, #calendar .seg button, #calendar .cal-nav button { min-height: 44px; }
  #calendar .cal-bar { gap: 8px; }
  #calendar .cal-range { order: -1; flex-basis: 100%; }
  #calendar .cal-nav { flex: 1 1 auto; }
  #calendar .cal-nav button { flex: 1 1 0; padding: 0 8px; }
  .hq-tag { display: none; }
}
#texting pre, #business pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
/* Find a feature: something the plan doesn't include yet names the plan that does. */
.dir-results li.locked a em, .dir-results .dir-locked em { color: #f3d78a; }
.dir-results .dir-locked { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); color: #e5ebff; font-size: 14px; }
.dir-results .dir-locked em { font-style: normal; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.dir-results .dir-locked .note { font-size: 12.5px; margin: 0; }
/* Find a feature at every width: in the tab strip on a tablet, in More on a phone. */
.more-find { margin-top: 18px; padding: 0; border-top: 0; }
@media (max-width: 1099px) and (min-width: 721px) {
  .directory .hq-tabs { flex: 1 1 auto; min-width: 0; }
  .directory .dir-find { display: block; flex: 0 0 190px; position: relative; padding: 6px 8px 6px 0; border-top: 0; }
  .directory .dir-find .dir-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .directory .dir-find input { min-height: 42px; }
  .directory .dir-results { position: absolute; right: 8px; top: calc(100% + 6px); width: min(340px, 80vw); margin: 0; padding: 8px; border-radius: 14px; background: rgba(8,14,44,.97); border: 1px solid var(--glassline); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
}
/* Long forms on a computer: the label beside its field, like a settings list, instead of one tall column of
   full-width boxes. Everything that isn't a label/field pair (notes, headings, check boxes, button rows) spans. */
@media (min-width: 1100px) {
  .touch-form, #texting form.fields { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); column-gap: 18px; row-gap: 10px; align-items: center; }
  .touch-form > *, #texting form.fields > * { grid-column: 1 / -1; margin-top: 0; margin-bottom: 0; }
  .touch-form > label:not(.check), #texting form.fields > label:not(.check) { grid-column: 1; margin: 0; }
  .touch-form > label:not(.check) + :is(input, select, textarea, .row), #texting form.fields > label:not(.check) + :is(input, select, textarea) { grid-column: 2; }
  #texting form.fields > div:not(.row) { display: contents; }
  .touch-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .touch-row > label { grid-column: 1 / -1; }
  .invite { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: end; }
  .invite > label[for=invite-email] { grid-column: 1; grid-row: 1; }
  .invite > #invite-email { grid-column: 1; grid-row: 2; }
  .invite > label[for=invite-role] { grid-column: 2; grid-row: 1; }
  .invite > #invite-role { grid-column: 2; grid-row: 2; }
  .invite > button { grid-column: 3; grid-row: 2; min-height: 52px; }
}
.touch > details, .touch-look + details { margin: 16px 0 8px; }
/* The business picker: each business by name, its address key small beneath; a filter for long lists. */
#biz-list a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#biz-list .slug { font-size: 12.5px; font-weight: 400; color: var(--label); }
#biz-find { margin: 6px 0 10px; }
.fix-form { display: grid; gap: 8px; margin-top: 10px; }
.fix-form label { font-size: 13px; font-weight: 600; color: var(--soft2); }
#cust-count { margin: 10px 2px 12px; }

/* ---- Meta reviewer sign-in (public/reviewer-access.js): password form and strength meter ---- */
.pw-status { font-weight: 600; }
.pw-status[data-on="1"] { color: var(--good); }
.pw-form { display: grid; gap: 8px; margin: 12px 0 0; max-width: 560px; }
.pw-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pw-row input { flex: 1 1 220px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.pw-meter { display: grid; gap: 6px; }
.pw-bar { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.pw-fill { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .2s ease, background-color .2s ease; }
.pw-words { margin: 0; min-height: 1.4em; }
@media (prefers-reduced-motion: reduce) { .pw-fill { transition: none; } }

/* WEBY Bookkeeping terms (v2) and the separate arbitration box. */
.books-terms { max-height: 320px; overflow: auto; border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px 14px; margin: 8px 0; font-size: 14px; line-height: 1.5; }
.books-terms ol { padding-left: 20px; margin: 0; }
.books-terms li { margin: 0 0 8px; }
.books-agree { display: grid; gap: 4px; margin: 8px 0; }
.books-agree .check { align-items: flex-start; font-weight: 400; }
/* Calendar: month grid, drag to move, empty days as drop targets. */
#calendar .cal-hint { margin: 0 0 6px; font-size: 13px; }
#calendar .cal-empty { margin: 0 0 8px; padding: 6px 0; font-size: 13px; opacity: .7; }
#calendar .cal-day.cal-over, #calendar .cal-cell.cal-over { outline: 2px dashed var(--hi); outline-offset: 4px; border-radius: 8px; }
#calendar .cal-drag { cursor: grab; }
#calendar .cal-drag.cal-lift { opacity: .5; }
#calendar .cal-month { display: grid; gap: 4px; margin-top: 6px; }
#calendar .cal-mrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
#calendar .cal-mhead span { font-size: 12px; font-weight: 600; color: var(--label); text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: .04em; }
#calendar .cal-cell { display: grid; align-content: start; gap: 4px; min-height: 92px; padding: 8px; border: 1px solid var(--glassline); border-radius: 12px; background: rgba(5,9,30,.35); color: var(--soft); font: inherit; text-align: left; cursor: pointer; }
#calendar .cal-cell:hover { background: rgba(140,185,255,.1); }
#calendar .cal-cell:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
#calendar .cal-cell.out { opacity: .4; }
#calendar .cal-cell.today .cal-num { background: var(--ink); color: var(--bg); }
#calendar .cal-cell.busy { border-color: rgba(140,185,255,.4); }
#calendar .cal-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 13px; }
#calendar .cal-count { position: absolute; }
#calendar .cal-cell { position: relative; }
#calendar .cal-count { top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--hi); color: var(--bg); font-size: 12px; font-weight: 700; }
#calendar .cal-mini { display: grid; gap: 2px; font-size: 12px; line-height: 1.25; color: var(--soft2); }
#calendar .cal-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  #calendar .cal-cell { min-height: 56px; padding: 6px; }
  #calendar .cal-mini { display: none; }
  #calendar .cal-count { top: 4px; right: 4px; min-width: 18px; height: 18px; font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) { #calendar .cal-cell { transition: background .15s ease; } }

/* TikTok posting screen (WebMade: Marketing) */
.tt-post { margin: 12px 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 10px; }
.tt-post form { display: grid; gap: 10px; }
.tt-creator { display: flex; gap: 10px; align-items: center; color: var(--text); font-weight: 600; }
.tt-creator img { border-radius: 50%; object-fit: cover; }
.tt-preview { width: 100%; max-width: 270px; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; }
.tt-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0; display: grid; gap: 4px; }
.tt-group legend { padding: 0 6px; font-weight: 600; color: var(--text); }
.tt-group .note { margin: 0 0 6px 30px; }
.tt-label { color: var(--text); font-weight: 600; margin: 4px 0 0; }
.tt-videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.tt-video { display: grid; gap: 6px; }
.tt-video a { color: var(--text); text-decoration: none; display: grid; gap: 6px; }
.tt-video img, .tt-video .tt-nocover { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: rgba(255,255,255,.06); }
.tt-video .tt-vtitle { font-weight: 600; font-size: 15px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tt-video .tt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 13px; color: var(--muted); margin: 0; }
.tt-video .tt-stats dt { display: none; }

/* ==== Apple-grade pass, components (Owner 23:20 UTC 2026-10-24). ==== */
/* Section icons for the sidebar, the phone tab bar and More: one line-icon family. */
.hq-tabs a[data-sec=today], .bottom a[data-sec=today], .more a[href="#today"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E"); }
.hq-tabs a[data-sec=messages], .bottom a[data-sec=messages], .more a[href="#messages"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5c0 4.1-3.8 7.5-8.5 7.5-1.1 0-2.2-.2-3.2-.5L4 20l1.2-3.6C4.1 15 3.5 13.3 3.5 11.5 3.5 7.4 7.3 4 12 4s8.5 3.4 8.5 7.5z'/%3E%3C/svg%3E"); }
.hq-tabs a[data-sec=customers], .bottom a[data-sec=customers], .more a[href="#customers"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.4 3.3-5.5 6.5-5.5s5.9 2.1 6.5 5.5'/%3E%3Cpath d='M15.5 5.2a3.5 3.5 0 0 1 0 6.6M18 14.8c1.9.7 3.2 2.5 3.5 5.2'/%3E%3C/svg%3E"); }
.hq-tabs a[data-sec=reviews], .bottom a[data-sec=reviews], .more a[href="#reviews"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.6 5.5 6 .8-4.4 4.1 1.1 5.9L12 16.6l-5.3 2.9 1.1-5.9-4.4-4.1 6-.8z'/%3E%3C/svg%3E"); }
.hq-tabs a[data-sec=more], .bottom a[data-sec=more], .more a[href="#more"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01' stroke-width='2.6'/%3E%3C/svg%3E"); }
.hq-tabs a[data-sec=operations], .bottom a[data-sec=operations], .more a[href="#operations"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.hq-tabs a[data-sec=growth], .bottom a[data-sec=growth], .more a[href="#growth"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5h17'/%3E%3Cpath d='M4.5 16l5-5 3.5 3.5 6.5-7'/%3E%3Cpath d='M15 7.5h4.5V12'/%3E%3C/svg%3E"); }
.hq-tabs a[data-sec=systems], .bottom a[data-sec=systems], .more a[href="#systems"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E"); }
.more a::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--hi); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* Today: a two-across grid of briefing cards on a wide screen; the numbers, WEBY and anything urgent span. */
@media (min-width: 1200px) {
  .briefing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .briefing > :not(.brief-block), .briefing > :is(.today-nums, .weby-today, .attention, .activation, .brief-next) { grid-column: 1 / -1; }
}
.briefing { gap: var(--gap); }
.today-nums .nums { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.today-nums > .note { margin-bottom: 0; }

/* Systems: grouped rows like Settings. Each row opens in place; every row starts closed, Brand Vault with its count. */
.sys-group { margin: 0 0 20px; border-radius: var(--r-card); border: 1px solid var(--hair); background: var(--surface); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); overflow: hidden; }
.sys-group:not(:has(> .panel:not([hidden]))) { display: none; }
.sys-group > .panel { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sys-group > .panel:not([hidden]) ~ .panel:not([hidden]) { border-top: 1px solid var(--hair); }
details.fold > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px var(--pad); cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h3 { flex: 1; margin: 0; font: 600 var(--fs-body)/1.3 var(--body); letter-spacing: -.01em; }
details.fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); transform: rotate(-45deg); transition: transform .2s; }
details.fold[open] > summary::after { transform: rotate(45deg); }
details.fold > summary:hover { background: var(--fill); }
details.fold > summary:focus-visible { outline-offset: -3px; }
details.fold[open] { padding-bottom: var(--pad); }
details.fold > :not(summary) { margin-left: var(--pad); margin-right: var(--pad); }
details.fold > .note:first-of-type { margin-top: 0; }

/* Long lists: the first rows, then one quiet "Show all" (public/my-business.js clampLists). */
.rows[data-clamp=closed] > li:nth-child(n+6) { display: none; }
.rows[data-clamp=closed] > li:nth-child(5) { border-bottom: 0; }
.rows-more { margin: 8px 0 0; }

/* Operations: Employees on one line each (name, since, Edit, Left), never a full-width Left. */
.staff-list li.member { grid-template-columns: minmax(0, 1fr) auto auto auto; }
@media (max-width: 720px) { .staff-list li.member { grid-template-columns: minmax(0, 1fr) auto auto; } .staff-list li.member .who { grid-column: 1 / -1; } }
.staff-num strong { font: 700 var(--fs-hero)/1 var(--display); color: var(--hi); }

/* Evidence tags: the same 22 px pill, outlined so they read as a source, not a status. */
.ev > summary { min-height: 22px; padding: 0 8px; font: 500 var(--fs-cap)/1 var(--body); }

/* Inputs: one height and one radius across the app. */
.hq input:not([type=checkbox], [type=radio], [type=color], [type=file]), .hq select { min-height: 44px; border-radius: 12px; border-color: rgba(255,255,255,.14); background-color: var(--fill); font-size: var(--fs-body); }
.hq textarea { border-radius: 12px; border-color: rgba(255,255,255,.14); background: var(--fill); font-size: var(--fs-body); }
.hq label { color: var(--soft2); font-weight: 500; }

/* ---- WebMade team screens (business picker): wide, left-aligned, two across, the long tail behind disclosures. ---- */
.hq #picker:has(.wm-admin > .panel:not([hidden])) { max-width: 1120px; text-align: left; }
.hq #picker:has(.wm-admin > .panel:not([hidden])) > :is(.eyebrow, h1, p) { text-align: center; }
.hq #picker:has(.wm-admin > .panel:not([hidden])) #biz-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.wm-admin { display: grid; gap: var(--gap); margin-top: 36px; text-align: left; grid-template-columns: minmax(0, 1fr); }
.wm-admin:not(:has(> .panel:not([hidden]))) { display: none; }
.wm-admin > .eyebrow { justify-self: start; }
.wm-admin > .panel { margin: 0; }
@media (min-width: 1000px) {
  .wm-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .wm-admin > :is(.eyebrow, #wm-queue-box, #wm-margins-box, #wm-mkt-box) { grid-column: 1 / -1; }
}
.wm-admin h2 { font: 600 var(--fs-title)/1.25 var(--display); letter-spacing: -.02em; margin: 0 0 6px; }
.wm-admin h3 { font: 600 var(--fs-body)/1.3 var(--display); margin: 24px 0 6px; }
.wm-admin .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wm-admin .rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wm-admin .rows li > span:first-child { flex: 1 1 260px; }
.wm-admin .rows li > .row { margin-top: 0; }
.wm-admin .queue .queue-item { display: grid; }
.margin-row { grid-template-columns: minmax(7em, 1fr) 4.5em 7.5em 7.5em 5em; }
@media (max-width: 560px) { .margin-row { grid-template-columns: minmax(0, 1fr) 6.5em; } }
details.wm-more { margin-top: 14px; border-top: 1px solid var(--hair); }
details.wm-more > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-weight: 600; color: var(--ink); }
details.wm-more > summary::-webkit-details-marker { display: none; }
details.wm-more > summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); transform: rotate(45deg); transition: transform .2s; }
details.wm-more[open] > summary::after { transform: rotate(-135deg); }
details.wm-more > summary .note { font-weight: 400; }
details.wm-more:has(> form[hidden]) { display: none; }
details.wm-more > form { margin-top: 4px; }
/* The More behind a connected account's everyday buttons: small, no rule above it. */
details.wm-more.acts { flex-basis: 100%; margin-top: 2px; border-top: 0; }
details.wm-more.acts > summary { min-height: 36px; font-size: var(--fs-note); color: var(--soft2); justify-content: flex-start; }
details.wm-more.acts > summary::after { margin-left: 0; width: 6px; height: 6px; }

/* TikTok posting and results: the same card as everything else. Restyled only; every element, its order and its
   words stay exactly as TikTok's audit checks them. */
.tt-post { margin: 16px 0; padding: var(--pad); border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--fill); gap: 14px; text-align: left; }
.tt-post > h3 { margin: 0; font: 600 var(--fs-title)/1.25 var(--display); letter-spacing: -.02em; }
.tt-post form { gap: 14px; margin: 0; }
.tt-post form > label:not(.check) { display: grid; gap: 6px; }
.tt-creator { gap: 12px; min-height: 44px; padding: 8px 14px; border-radius: var(--r-row); background: var(--fill2); font-weight: 600; }
.tt-preview { border-radius: var(--r-row); box-shadow: 0 0 0 1px var(--hair); }
.tt-group { border: 0; border-radius: var(--r-row); padding: 12px 16px; background: var(--fill2); gap: 2px; }
.tt-group legend { float: left; width: 100%; padding: 0 0 6px; font: 600 var(--fs-note)/1.3 var(--body); color: var(--soft2); }
.tt-group legend + * { clear: both; }
.tt-post .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
#wm-tt-submit { min-width: 180px; }
.tt-videos { gap: 16px; }
.tt-video img, .tt-video .tt-nocover { border-radius: var(--r-row); background: var(--fill2); }
.tt-video .tt-stats { font-size: var(--fs-cap); }

/* Touch Studio keeps its black and gold over the shared button family. */
.hq .touch button, .hq .touch button[type=submit]:not(.ghost) { background: linear-gradient(180deg, #f3d78a, #d9ad4f 60%, #b98a33); color: #140f05; border: 0; }
.hq .touch .ghost, .hq .touch .row .ghost { background: transparent; color: #f7f1e3; border: 1px solid rgba(212,164,67,.5); }
.hq .touch input:not([type=checkbox], [type=radio], [type=color], [type=file]), .hq .touch select { background-color: #0d0b07; border-color: rgba(212,164,67,.4); color: #f7f1e3; }
.tt-videos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.tt-video { min-width: 0; }
.tt-video .tt-stats dd { margin: 0; }
.wm-admin .tt-video a { color: var(--ink); }
/* Headings that take focus when a screen opens are not controls: no ring, like the section titles. */
.tt-post > h3:focus { outline: none; }

/* Phones: numbers two across, never one tall column of tiles. */
@media (max-width: 720px) {
  .today-nums .nums, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nums li, .tile { padding: 14px 16px; }
  .tile strong, .nums li strong { font-size: 30px; }
}
.today-nums .nums { padding: 0; }
.today-nums .nums li { margin: 0; }
/* Today on a wide screen: Needs you spans; the finished launch steps sit two across. */
@media (min-width: 1200px) {
  .briefing > .needs { grid-column: 1 / -1; }
  .activation .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
/* Growth on a wide screen: the small read-outs (Google, speed, story, posts) two across. */
@media (min-width: 1200px) {
  #growth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
  #growth > :not(.google, .speed, .story, .insight) { grid-column: 1 / -1; }
  #growth > .panel { margin: 0 0 var(--gap); }
}
/* A one-line panel note (the WebMade team link) is a full card, not a lede. */
.sec > .note.panel { max-width: none; margin: var(--gap) 0; font-size: var(--fs-note); color: var(--soft2); }
/* Customers: each person a row with a chevron. */
.person summary { list-style: none; padding-right: 22px; position: relative; }
.person summary::-webkit-details-marker { display: none; }
.person summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); transform: rotate(-45deg); transition: transform .2s; }
.person details[open] > summary::after { transform: rotate(45deg); }

/* ==== Wave 2 (Owner 2026-10-25: "Everything about Webmade should be to Apple.com standard or better"). ==== */
/* Today, a summary: the numbers and the one thing that needs you on top; the rest in grouped rows that open in place
   (the Systems rows: .sys-group, details.fold). A closed row shows its count on the right. */
.fold-val { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft2); font-size: var(--fs-note); font-variant-numeric: tabular-nums; }
.today-rows { margin: var(--gap) 0 0; }
.brief-row .brief-block { padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brief-row .ask-step { display: none; }
.brief-row .ask-card h3 { font: 600 var(--fs-body)/1.35 var(--display); margin: 0 0 4px; }
.brief-row .nums { margin-top: 2px; }
/* "Show all" and "How these are counted": a quiet accent line that opens in place. */
details.show-all { margin: 12px 0 0; }
details.show-all > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--hi); font: 600 var(--fs-note)/1.2 var(--body); }
details.show-all > summary::-webkit-details-marker { display: none; }
details.show-all > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
details.show-all[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.show-all > .brief-block { padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Needs you: the top item large, its reason, one button. */
.brief-block.needs h3 { display: flex; align-items: center; gap: 8px; }
.brief-block.needs h3 .pill { margin: 0; }
.brief-block.needs .rec { font: 600 var(--fs-title)/1.3 var(--display); letter-spacing: -.02em; margin: 2px 0 6px; }
.brief-block.needs > .note { margin: 0; }
.brief-block.needs > .button { margin-top: 14px; }
.needs-list ul { margin: 0; padding: 0; list-style: none; border-radius: var(--r-row); background: var(--fill); overflow: hidden; }
.needs-list li { margin: 0; padding: 12px 16px; }
.needs-list li + li { border-top: 1px solid var(--hair); }
/* Today so far: number and name per tile; definitions under "How these are counted". */
.today-nums h3 { margin-bottom: 12px; }
.today-nums .nums { margin: 0; }
.today-nums .nums li { display: grid; gap: 2px; align-content: start; }
.today-nums .nums li strong { margin: 0; }
.today-nums .nums li span { font-size: var(--fs-note); color: var(--soft2); }
.nums-how .rows li { font-size: var(--fs-note); }
.nums-how .rows .what { color: var(--soft2); }
.nums-how > .note { margin: 8px 0 0; color: var(--label); }
@media (max-width: 720px) {
  .briefing { gap: 12px; }
  .brief-hello { font-size: var(--fs-body); margin-top: -12px; }
  .today-nums .nums li { padding: 12px 14px; }
  .today-nums .nums li strong { font-size: 28px; }
  .brief-block.needs .rec { font-size: 19px; }
  .today-rows { margin-top: 12px; }
}
@media (min-width: 1200px) {
  .briefing > .needs { grid-column: auto; }
  .briefing > .today-nums { grid-column: auto; }
  .today-nums .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nums-how .rows { padding-left: 0; }
/* A row's own list is an inset grouped list too: no bullets, a hairline between, links as rows with a chevron. */
:is(.brief-row .brief-block, .needs-list) > ul:not(.nums, .rows, .weby-asks, .unchecked) { margin: 0; padding: 0; list-style: none; border-radius: var(--r-row); background: var(--fill); overflow: hidden; }
:is(.brief-row .brief-block, .needs-list) > ul:not(.nums, .rows, .weby-asks, .unchecked) > li { margin: 0; padding: 12px 16px; }
:is(.brief-row .brief-block, .needs-list) > ul:not(.nums, .rows, .weby-asks, .unchecked) > li + li { border-top: 1px solid var(--hair); }
:is(.brief-row .brief-block, .needs-list) li > a:only-child { display: flex; align-items: center; gap: 12px; min-height: 24px; color: var(--ink); text-decoration: none; }
:is(.brief-row .brief-block, .needs-list) li > a:only-child::after { content: ""; flex: none; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); transform: rotate(-45deg); }
.needs-list li[data-level=critical] > a { color: #ffc2cc; }
/* Operations: grouped rows like Systems (the same .sys-group and details.fold); Coming up starts open. A row's long
   title wraps rather than pushing its count off the card. */
#sec-operations .sys-group, #sec-today .sys-group { margin-bottom: var(--gap); }
details.fold > summary h3 { min-width: 0; overflow-wrap: anywhere; }
details.fold > .rows:first-of-type, details.fold > div:first-of-type > .grid2 { margin-top: 0; }
#payments-list .grid2 { gap: 0 var(--gap); }
/* Change requests: each request one row that opens to Who's on it, Status, Due by, Add note and its history. */
.queue > li.queue-item { display: block; padding: 0; }
.wm-admin .queue > li.queue-item { display: block; }
.queue .q-open > summary { list-style: none; display: grid; gap: 4px; padding: 14px 28px 14px 0; position: relative; cursor: pointer; min-height: 44px; }
.queue .q-open > summary::-webkit-details-marker { display: none; }
.queue .q-open > summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 8px; height: 8px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); transform: rotate(-45deg); transition: transform .2s; }
.queue .q-open[open] > summary::after { transform: rotate(45deg); }
.queue .q-what { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.queue .q-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.queue .q-meta .pill { margin: 0; }
.queue .q-open > .row { margin: 0 0 6px; }
.queue .q-h { margin: 14px 0 4px; font: 600 var(--fs-note)/1.3 var(--body); color: var(--soft2); }
.queue .q-open[open] { padding-bottom: 14px; }
.queue .queue-item.overdue { padding-left: 12px; }

/* The member view (signed in before purchase): a plain page, not a card in a card. One next step with one cyan
   button, the credit as a number, and the rest as cards two across, their lists inset and grouped. */
.hq #member { max-width: 980px; padding: 8px 0 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hq #member::before, .hq #member::after { display: none; }
.hq #member > .weby { width: 56px; height: 56px; margin: 0 0 16px; }
.hq #member > .eyebrow { margin: 0; font: 600 var(--fs-note)/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--hi); }
.hq #member > .eyebrow::before { display: none; }
.hq #member h1 { margin: 4px 0 6px; font: 700 var(--fs-hero)/1.1 var(--display); letter-spacing: -.025em; }
.hq #member #m-phone { margin: 0; color: var(--soft2); }
.hq #member .m-next { margin: 24px 0 var(--gap); padding: var(--pad); border-radius: var(--r-card); border: 1px solid rgba(95,227,216,.3); background: var(--surface); box-shadow: none; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
.hq #member .m-next::before { font: 600 var(--fs-note)/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--hi); margin-bottom: 6px; }
.hq #member .m-step { font: 600 var(--fs-title)/1.3 var(--display); letter-spacing: -.02em; margin: 0 0 16px; }
.hq #member .m-next .button { background: var(--cyan); color: #04121a; box-shadow: var(--wm-glow); }
.hq #member .m-next .button:is(:hover, :focus-visible) { background: #86eee5; box-shadow: var(--wm-glow-hover); }
.hq #member .m-next .button:active { box-shadow: var(--wm-glow-press); }
.hq #member .m-grid { gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.hq #member .m-grid h2 { font: 600 var(--fs-body)/1.3 var(--display); letter-spacing: -.01em; margin: 0 0 10px; color: #fff; }
.hq #member .m-grid .panel > p { margin: 0 0 10px; color: var(--soft); }
.hq #member .m-big { font: 700 var(--fs-hero)/1.1 var(--display); letter-spacing: -.03em; margin: 0 0 12px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.hq #member .m-grid ul.rows { margin: 0 0 10px; padding: 0; border-radius: var(--r-row); background: var(--fill); overflow: hidden; }
.hq #member .m-grid ul.rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 48px; padding: 10px 16px; border-bottom: 0; color: var(--ink); }
.hq #member .m-grid ul.rows > li + li { border-top: 1px solid var(--hair); }
.hq #member .m-grid ul.rows > li > .note { color: var(--soft2); }
.hq #member .m-grid ul.rows > li > button { margin-left: auto; }
.hq #member .m-grid ul.rows > li > a:only-child { flex: 1; display: flex; align-items: center; color: var(--ink); text-decoration: none; text-transform: capitalize; }
.hq #member .m-grid ul.rows > li > a:only-child::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--label); border-bottom: 2px solid var(--label); transform: rotate(-45deg); }
.hq #member .m-grid ul.rows > li.note { color: var(--soft2); }
.hq #member #m-ref { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hq #member #m-ref > :not(input, button) { grid-column: 1 / -1; }
.hq #member #m-ref > button:only-child { justify-self: start; }
.hq #member .m-alert { margin: 0 0 10px; padding: 12px 16px; border-radius: var(--r-row); background: rgba(251,191,36,.12); color: #fde3a1; font-size: var(--fs-note); }
.hq #member #m-prefs > p:first-child { margin-top: 0; }
.hq #member #m-prefs > .note, .hq #member #m-terms { color: var(--soft2); }
.hq #member > p:last-child { text-align: center; margin: 32px 0 0; }
@media (max-width: 720px) { .hq #member { padding: 0; } .hq #member .m-step { font-size: 19px; } }
body.hq[data-view=member] .keyart::after { background: linear-gradient(180deg, rgba(5,5,12,.8), rgba(5,5,12,.9) 40%, rgba(5,5,12,.95)); }
.hq #member #m-sessions ul.rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; }
.hq #member #m-sessions ul.rows > li > span { grid-column: 1; }
.hq #member #m-sessions ul.rows > li > button { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

/* Touch Studio inside (still black and gold): each part under a hairline, cards as one grouped list with what each
   opens beside it and the rest under More, the page's details in rows that open in place. */
.touch { padding: var(--pad); border-radius: var(--r-card); background: linear-gradient(170deg, #120d05, #060504 60%); }
.touch > h3 { margin: 28px 0 12px; padding-top: 24px; border-top: 1px solid rgba(212,164,67,.22); font: 600 var(--fs-title)/1.25 var(--display); letter-spacing: -.02em; color: #f3d78a; }
.touch > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.touch .note { color: #d9bd7e; }
.touch-cards { list-style: none; margin: 0 0 12px; padding: 0; border-radius: var(--r-row); border: 1px solid rgba(212,164,67,.28); background: rgba(255,236,190,.035); overflow: hidden; }
.touch-cards > li { padding: 14px 16px; }
.touch-cards > li + li { border-top: 1px solid rgba(212,164,67,.2); }
.touch-card.touch-suspended, .touch-card.touch-replaced { opacity: .6; }
.touch-card-head { display: flex; gap: 12px; align-items: flex-start; }
.touch-card-head input[type=checkbox] { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: #d9ad4f; }
.touch-card-id { display: grid; gap: 2px; min-width: 0; }
.touch-card-id strong { color: #f7f1e3; font-weight: 600; }
.touch-card-id .note { margin: 0; }
.touch-card-id .src { font-size: var(--fs-cap); color: #a48a55; overflow-wrap: anywhere; }
.touch-card > .row { margin: 10px 0 0 34px; align-items: center; }
.touch .touch-card > .row select { flex: 1 1 180px; min-width: 0; max-width: 280px; }
.touch details.wm-more.touch-more { flex-basis: auto; margin: 0; border: 0; }
.touch details.wm-more.touch-more > summary { min-height: 44px; padding: 0 4px; color: #f3d78a; font-weight: 600; }
.touch details.wm-more.touch-more[open] { flex-basis: 100%; }
.touch details.wm-more.touch-more > .row { margin-top: 4px; }
.touch-several { margin-top: 4px; }
.touch-several select { width: auto; flex: 1 1 180px; max-width: 280px; }
/* The page's details: rows that open in place, then Save page and Preview. */
.touch-page { display: grid; gap: 0; margin: 4px 0 0; }
.touch-page > .row { margin-top: 16px; }
details.touch-fold { border-top: 1px solid rgba(212,164,67,.2); }
.touch-page > details.touch-fold:last-of-type { border-bottom: 1px solid rgba(212,164,67,.2); }
details.touch-fold > summary { list-style: none; display: flex; align-items: center; min-height: 52px; cursor: pointer; font-weight: 600; color: #f7f1e3; }
details.touch-fold > summary::-webkit-details-marker { display: none; }
details.touch-fold > summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid #d9ad4f; border-bottom: 2px solid #d9ad4f; transform: rotate(45deg); transition: transform .2s; }
details.touch-fold[open] > summary::after { transform: rotate(-135deg); }
details.touch-fold[open] { padding-bottom: 16px; }
details.touch-fold > .touch-form { margin: 0; }
.touch > details.touch-fold { margin: 16px 0 0; border-bottom: 1px solid rgba(212,164,67,.2); }
.touch > details.touch-fold > :not(summary) { margin-top: 0; }
.touch-logo-now { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: #0b0906; }
.touch-gold, .touch a.touch-gold { color: #f3d78a; margin-right: 12px; }
.touch-art { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.touch-art-img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.touch .list.leads > li { border-bottom-color: rgba(212,164,67,.2); }
/* Glass colours: a dot and, when chosen, a ring in the colour itself. */
.touch-swatch { --c: #f3d78a; }
.touch-swatch[data-k=cyan] { --c: #6ff4ff; } .touch-swatch[data-k=ruby] { --c: #ff5468; } .touch-swatch[data-k=emerald] { --c: #38e898; }
.touch-swatch[data-k=amber] { --c: #ffc048; } .touch-swatch[data-k=violet] { --c: #b080ff; } .touch-swatch[data-k=titanium] { --c: #d0dce8; }
.touch-dot { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; vertical-align: -2px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.hq .touch .touch-swatch[aria-checked=true] { outline: 2px solid var(--c); outline-offset: 2px; box-shadow: 0 0 14px var(--c); }
.touch-swatches { margin: 10px 0; }
@media (max-width: 720px) {
  .touch { padding: 18px 16px; }
  .touch-card > .row { margin-left: 0; }
  .touch .touch-card > .row select { max-width: none; }
}
.touch-look > h3 { margin: 28px 0 8px; padding-top: 24px; border-top: 1px solid rgba(212,164,67,.22); font: 600 var(--fs-title)/1.25 var(--display); letter-spacing: -.02em; color: #f3d78a; }
.touch .list a.touch-gold { display: inline-flex; min-height: 44px; padding: 0; border: 0; background: none; color: #f3d78a; font-weight: 600; }

/* ==== Wave 3 (Owner 2026-10-25). ==== */
/* Growth and Reviews read like Today: a short summary on top, then grouped rows. A card moved into a row loses its
   own card chrome; the row is the card. */
.brief-row > details > .panel { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#sec-growth .sys-group, #sec-reviews .sys-group { margin-bottom: var(--gap); }
#growth .tiles { margin: 0 0 var(--gap); }
.review-tiles { margin: var(--gap) 0; }
.review-tiles .tile strong { font-size: 28px; }
#reviews > .big { margin: 0; }
#reviews > .note { margin: 4px 0 0; }
#reviews > .review-touch { margin: 0 0 var(--gap); }
/* Post-Purchase Experience: its sections as one strip of tabs that scrolls sideways inside itself, never the page;
   the numbers as compact tiles; the long lists under "What customers mention" and "Recent sales". */
#postpay .pp-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 0 14px; padding: 2px 0 6px; scrollbar-width: none; }
#postpay .pp-tabs::-webkit-scrollbar { display: none; }
#postpay .pp-tabs button { flex: none; min-height: 36px; padding: 0 14px; white-space: nowrap; }
#postpay .pp-tabs button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#postpay .panel { margin: 0 0 12px; padding: 14px 16px; border: 0; border-radius: var(--r-row); background: var(--fill); backdrop-filter: none; -webkit-backdrop-filter: none; }
#postpay .panel > p { margin: 0; }
#postpay .pp-safe { margin: 0 0 12px; }
#postpay .stats { gap: 8px; margin: 0 0 8px; }
#postpay .stat { padding: 10px 12px; border: 0; border-radius: var(--r-row); background: var(--fill); }
#postpay .stat strong { font: 700 var(--fs-title)/1.15 var(--display); color: #fff; }
#postpay .stat .note { font-size: var(--fs-cap); }
details.pp-more { margin: 4px 0 0; }
@media (max-width: 720px) { #postpay .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Touch Studio's in-page sheets (Note, Suspend, Replace): the question, its fields, then Cancel and the action on the
   right. Never a browser pop-up. */
.touch-sheet { display: grid; gap: 8px; margin: 12px 0 0 34px; padding: 16px; border-radius: var(--r-row); border: 1px solid rgba(212,164,67,.35); background: rgba(255,236,190,.05); }
.touch-sheet > p:not(.note) { margin: 0; color: #f7f1e3; font-weight: 600; }
.touch-sheet label { font-size: var(--fs-note); color: #d9bd7e; }
.touch-sheet > .row { justify-content: flex-end; margin-top: 4px; }
.touch-sheet > .note:empty { display: none; }
@media (max-width: 720px) { .touch-sheet { margin-left: 0; } .touch-sheet > .row > button { flex: 1 1 0; } }

/* ---- Wave 4 (2026-10-25) ---- */
/* The shared in-page sheet (wmSheet in my-business.js) that replaces the browser's confirm, alert and prompt:
   the words, an optional field, then Cancel and the action on the right. */
.wm-sheet { width: min(460px, calc(100vw - 32px)); padding: 24px; }
.wm-sheet form { display: grid; gap: 14px; margin: 0; }
.wm-sheet p { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.wm-sheet input { width: 100%; }
.wm-sheet .row { justify-content: flex-end; gap: 10px; margin: 4px 0 0; }
@media (max-width: 720px) { .wm-sheet .row > button { flex: 1 1 0; } }
/* A Touch Studio sheet under the studio's own controls, not under a card's name. */
.touch-sheet.flush { margin-left: 0; }
/* A sheet's two buttons share the width on a phone, and a longer action label keeps to one line. */
.touch-sheet > .row > button, .wm-sheet .row > button { white-space: nowrap; }
@media (max-width: 720px) { .touch-sheet > .row > button, .wm-sheet .row > button { flex: 1 1 auto; } }

/* ==== Glass (Owner 20:48 UTC 2026-10-26, the WEBMADE_GLASS kit's material system, in our own CSS) ====
   Three materials. Clear: the bar, the directory, the phone tab bar. Frosted: summary cards (the Briefing, tiles,
   your next step) and the short sheets (wmSheet). Solid: dense content, i.e. grouped rows, forms, payments, customers
   and every other dialog. A blurred material is drawn on the card's ::before with the content sharp above it; a card
   inside a card never blurs again. Nothing on the shell (body, #main, .sec) takes filter, opacity or mask, and the
   world poster (.keyart) stays a fixed sibling behind with its readability shade. */
body.hq {
  --g-clear: rgb(7 13 23 / 64%); --g-frosted: rgb(9 16 28 / 78%); --g-solid: #0a121d; --g-nest: rgb(255 255 255 / 4.5%);
  --g-line: rgb(202 230 255 / 13%); --g-edge: rgb(229 248 255 / 12%); --g-cyan: #37d7ff; --g-blur: 18px;
  --g-shadow: 0 18px 50px -12px rgb(0 0 0 / 55%);
}
/* The poster is fixed to the viewport (app.css .keyart), so it is behind every scroll position; its shade ends in the
   page's own obsidian, so no edge can show where the picture stops. */
body.hq { background: #05080f; }
body.hq:is([data-view=business], [data-view=member]) .keyart::after { background: linear-gradient(180deg, rgb(5 8 15 / 52%), rgb(5 8 15 / 76%) 42%, rgb(5 8 15 / 90%) 80%, #05080f); }
/* Cyan for the primary action and for the status line; amber stays for a real warning (attention is red). */
.hq .glow, .hq a.button.glow, .hq button[type=submit]:not(.ghost) { background: var(--g-cyan); color: #03121a; }
.hq .glow:hover, .hq a.button.glow:hover, .hq button[type=submit]:not(.ghost):hover { background: #7ce5ff; }
.brief-status.needs_you { color: var(--g-cyan); }

/* Solid: the material is the card's own opaque fill, so nothing is blurred under dense content. */
.panel, .sys-group, .people, .more, dialog:not(.wm-sheet) { background: var(--g-solid); border-color: var(--g-line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 1px 0 var(--g-edge), var(--g-shadow); }
dialog:not(.wm-sheet) { box-shadow: 0 0 0 1px var(--g-line), inset 0 1px 0 var(--g-edge), 0 30px 80px rgb(0 0 0 / 60%); }

/* Frosted and clear: the material on ::before, the content above it untouched. (Your next step keeps its ::before
   for its label, so its material is on ::after.) */
.brief-block, .tile, .hq #member .m-next, .bottom, dialog.wm-sheet { isolation: isolate; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--g-line); }
.brief-block, .tile, .hq #member .m-next { position: relative; }
:is(.brief-block, .tile, .bottom, dialog.wm-sheet)::before, .hq #member .m-next::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-color: var(--g-frosted); box-shadow: inset 0 1px 0 var(--g-edge), var(--g-shadow);
}
.bottom::before { background-color: var(--g-clear); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.brief-block, .tile, dialog.wm-sheet)::before, .hq #member .m-next::after { -webkit-backdrop-filter: blur(var(--g-blur)) saturate(110%); backdrop-filter: blur(var(--g-blur)) saturate(110%); }
  .bottom::before { -webkit-backdrop-filter: blur(var(--g-blur)) saturate(115%); backdrop-filter: blur(var(--g-blur)) saturate(115%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.brief-block, .tile, .bottom, dialog.wm-sheet)::before, .hq #member .m-next::after { background-color: var(--g-solid); }
}
.brief-block.attention::before { background-image: linear-gradient(180deg, rgb(251 113 133 / 10%), transparent 70%); }
/* The bar already draws on ::before: the clear material. */
.hq-head::before { background: var(--g-clear); border-color: var(--g-line); box-shadow: inset 0 1px 0 var(--g-edge), 0 12px 40px -24px rgb(0 0 0 / 90%); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(115%); backdrop-filter: blur(var(--g-blur)) saturate(115%); }
/* The directory scrolls when Find a feature fills it, and a ::before would scroll away with its content, so its clear
   material sits on the rail itself (backdrop-filter never blurs the rail's own content). */
.directory { background: var(--g-clear); border-color: var(--g-line); box-shadow: inset 0 1px 0 var(--g-edge); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(115%); backdrop-filter: blur(var(--g-blur)) saturate(115%); }

/* Nested: a card inside a card is a plain inner fill, never a second blur. */
:is(.panel, .sys-group, .brief-block, details) :is(.brief-block, .tile)::before { display: none; }
:is(.panel, .sys-group) .tile { background: var(--g-nest); }

/* The nav: one dark selected pill. */
.hq-tabs a { border-radius: 999px; }
.hq-tabs a[aria-current=page] { background: rgb(2 5 10 / 78%); box-shadow: inset 0 0 0 1px var(--g-line); }
@media (max-width: 720px) { .bottom a { border-radius: 22px; } .bottom a[aria-current=page] { background: rgb(2 5 10 / 78%); box-shadow: inset 0 0 0 1px var(--g-line); } }

/* One cyan accent per card: its key number. */
.tile strong, .nums li strong, .m-big, .brief-block.review .review-clock { color: var(--g-cyan); }

/* The enter wave: for a moment after a section opens (body[data-enter], set by route()), each card's content rises
   12 px and fades in, 260 ms, 40 ms apart for the first eight cards, the rest together. Only the content moves; the
   material (::before) stays put, so its blur is never animated. A wmSheet's content enters the same way and the sheet
   leaves in half the time. All of it is off under reduced motion. */
@keyframes g-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
  body.hq[data-enter] :is(.panel, .sys-group, .people, .more, .brief-block, .tile, #member .m-next):not(:is(.panel, .sys-group, .brief-block, .tile) *) > * { animation: g-rise 260ms cubic-bezier(.2, .7, .2, 1) both; }
  body.hq[data-enter] :is(.panel, .sys-group, .people, .more, .brief-block, .tile, #member .m-next):not(:is(.panel, .sys-group, .brief-block, .tile) *):nth-child(2) > * { animation-delay: 40ms; }
  body.hq[data-enter] :is(.panel, .sys-group, .people, .more, .brief-block, .tile, #member .m-next):not(:is(.panel, .sys-group, .brief-block, .tile) *):nth-child(3) > * { animation-delay: 80ms; }
  body.hq[data-enter] :is(.panel, .sys-group, .people, .more, .brief-block, .tile, #member .m-next):not(:is(.panel, .sys-group, .brief-block, .tile) *):nth-child(4) > * { animation-delay: 120ms; }
  body.hq[data-enter] :is(.panel, .sys-group, .people, .more, .brief-block, .tile, #member .m-next):not(:is(.panel, .sys-group, .brief-block, .tile) *):nth-child(5) > * { animation-delay: 160ms; }
  body.hq[data-enter] :is(.panel, .sys-group, .people, .more, .brief-block, .tile, #member .m-next):not(:is(.panel, .sys-group, .brief-block, .tile) *):nth-child(6) > * { animation-delay: 200ms; }
  body.hq[data-enter] :is(.panel, .sys-group, .people, .more, .brief-block, .tile, #member .m-next):not(:is(.panel, .sys-group, .brief-block, .tile) *):nth-child(7) > * { animation-delay: 240ms; }
  body.hq[data-enter] :is(.panel, .sys-group, .people, .more, .brief-block, .tile, #member .m-next):not(:is(.panel, .sys-group, .brief-block, .tile) *):nth-child(n+8) > * { animation-delay: 280ms; }
  /* The section heading cross-fades in with its cards. */
  body.hq[data-enter] .sec > :is(h2, .lede, .brief-hello, .brief-status) { animation: g-fade 200ms ease-out both; }
  dialog.wm-sheet[open] > * { animation: g-rise 260ms cubic-bezier(.2, .7, .2, 1) both; }
  dialog.wm-sheet { transition: opacity 130ms ease-in, transform 130ms ease-in, overlay 130ms allow-discrete, display 130ms allow-discrete; }
  dialog.wm-sheet:not([open]) { opacity: 0; transform: translateY(12px); }
}
@keyframes g-fade { from { opacity: 0; } }

/* Fallbacks: reduced transparency and forced colours get solid panels with borders and no world behind. */
@media (prefers-reduced-transparency: reduce) {
  :is(.brief-block, .tile, .bottom, dialog.wm-sheet)::before, .hq #member .m-next::after, .hq-head::before { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .directory { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.hq .keyart::after, body.hq:is([data-view=business], [data-view=member]) .keyart::after { background: #05080f; }
  dialog::backdrop { background: rgb(3 6 12 / 92%); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  body.hq .keyart { display: none; }
  .panel, .sys-group, .people, .more, dialog, .directory { background: Canvas; border: 1px solid CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :is(.brief-block, .tile, .bottom, dialog.wm-sheet)::before, .hq #member .m-next::after, .hq-head::before { background: Canvas; border: 1px solid CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hq-tabs a[aria-current=page], .bottom a[aria-current=page] { outline: 2px solid Highlight; box-shadow: none; }
}

/* ==== Signature glow (Owner 21:21 UTC 2026-10-26): the tokens live in app.css. The card's one primary action and
   Ask WEBY glow in full; tinted and ghost buttons glow at the rim; buttons inside dense lists (people, rows, fields,
   More, Ask WEBY's suggestions, segmented controls) keep a faint ring and take the rim on hover, so a long list never
   turns into a wall of light. Status pills, chips, fold rows and text links are not buttons and stay quiet. Touch
   Studio keeps its own black and gold. ==== */
.hq :is(button, .button):not(.touch *) { box-shadow: var(--wm-glow-rim); }
.hq :is(.glow, a.button.glow, button[type=submit]:not(.ghost), .m-next .button):not(.touch *), .hq #weby-btn { box-shadow: var(--wm-glow); }
.hq :is(.rows, .row, .people, .more, ul.fields, .asks, .seg, .pp-tabs) :is(button, .button):not(.glow, [type=submit]) { box-shadow: var(--wm-glow-quiet); }
.hq :is(button, .button):not(.touch *):is(:hover, :focus-visible) { box-shadow: var(--wm-glow-rim-hover); }
.hq :is(.rows, .row, .people, .more, ul.fields, .asks, .seg, .pp-tabs) :is(button, .button):not(.glow, [type=submit]):is(:hover, :focus-visible, .on) { box-shadow: var(--wm-glow-rim-hover); }
.hq :is(.glow, a.button.glow, button[type=submit]:not(.ghost), .m-next .button):not(.touch *):is(:hover, :focus-visible), .hq #weby-btn:is(:hover, :focus-visible) { box-shadow: var(--wm-glow-hover); }
.hq :is(button, .button):not(.touch *):active, .hq :is(.glow, a.button.glow, button[type=submit]:not(.ghost), .m-next .button):not(.touch *):active, .hq #weby-btn:active { box-shadow: var(--wm-glow-press); }
/* A button that can't be pressed never glows, whatever else matches it. */
.hq :is(button, .button):is(:disabled, [aria-disabled=true]) { box-shadow: var(--wm-glow-off) !important; }
.hq .res-pick button { box-shadow: none; }
/* The tabs are navigation: the page you are on carries the rim, the others light up under the pointer. */
.hq-tabs a[aria-current=page], .bottom a[aria-current=page] { box-shadow: inset 0 0 0 1px var(--g-line), var(--wm-glow-rim); }
.hq-tabs a:not([aria-current=page]):is(:hover, :focus-visible) { box-shadow: var(--wm-glow-rim); }
/* The card's one main action is the cyan glass bubble (tokens in app.css); other buttons stay flat. */
.hq :is(.glow, a.button.glow, .m-next .button):not(.touch *):not(:disabled, [aria-disabled=true]) { background: var(--wm-bubble); color: #04202a; box-shadow: var(--wm-bubble-edge), var(--wm-glow-cta); }
.hq :is(.glow, a.button.glow, .m-next .button):not(.touch *):not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) { background: var(--wm-bubble); box-shadow: var(--wm-bubble-edge), var(--wm-glow-cta-hover); }
@media (prefers-reduced-motion: reduce) { .hq :is(button, .button), .hq-tabs a, .bottom a { transition: none; } }
@media (forced-colors: active) { .hq :is(button, .button), .hq-tabs a, .bottom a { box-shadow: none !important; } }