:root {
  --hm-ink: #231a1e;
  --hm-paper: #f6f4f5;
  --hm-surface: #ffffff;
  --hm-acid: #c9f227;
  --hm-mauve: #876d7a;
  --hm-attention: #f1c75b;
  --hm-muted: #71666c;
  --hm-soft: #e8e2e5;
  --hm-danger: #d92d20;
  --hm-blue: #4c78d8;
  --hm-sidebar: 236px;
}
* { box-sizing: border-box; }
html { background: var(--hm-paper); color: var(--hm-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-height: 100vh; background: linear-gradient(rgba(35,26,30,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(35,26,30,.025) 1px,transparent 1px),var(--hm-paper); background-size: 28px 28px; }
button,input,select,textarea { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
.hm-app { min-height: 100vh; }
.hm-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--hm-sidebar); background: var(--hm-ink); color: var(--hm-paper); border-right: 2px solid var(--hm-ink); display: flex; flex-direction: column; z-index: 20; }
.hm-brand { height: 86px; display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid #4a3941; font-weight: 950; font-size: 21px; letter-spacing: -1px; text-decoration: none; }
.hm-brand-mark { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-right: 10px; background: var(--hm-acid); color: var(--hm-ink); font-weight: 1000; clip-path: polygon(0 0,76% 0,100% 24%,100% 100%,24% 100%,0 76%); }
.hm-workspace { margin: 18px 14px 12px; padding: 11px 12px; border: 1px solid #4a3941; background: #30242a; font-size: 12px; }
.hm-workspace strong { display: block; margin-top: 3px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-eyebrow { color: var(--hm-muted); font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: 1.35px; font-weight: 900; }
.hm-sidebar .hm-eyebrow { color: #b4a3ac; }
/* A short window must not crush the sidebar. Everything here is a flex column
   item, so by default they all shrink — on a laptop under ~850px tall the brand
   band collapsed from 86px to 33px and the logo sat jammed against the very top
   edge, looking clipped. The nav is the one part that can afford to scroll, so
   it absorbs the overflow and nothing else gives. */
/* Live numbers on a published post. These reused the dashboard's headline
   metric card, one per number down a narrow column, which turned "0 views,
   0 likes, 0 clicks" into three full-width slabs. A stat nobody has to scroll
   past is a stat they might actually read. */
/* Move every platform for a post in one go */
.hm-move-all { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-bottom: 1.5px solid var(--hm-ink); }
.hm-move-all input { border: 1.5px solid var(--hm-ink); padding: 6px 8px;
  background: white; font: inherit; }

/* Full-size artwork, opened from the phone preview's ⤢ */
.hm-phone-zoom { position: absolute; top: 8px; right: 8px; z-index: 4;
  width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(35,26,30,.62); color: #fff;
  font-size: 13px; line-height: 1; }
.hm-phone-zoom:hover { background: rgba(35,26,30,.85); }
/* A column, not a centred grid: the image gets whatever is left after the
   padding and the label, as a PERCENTAGE of that box. Sizing it in vh ignored
   both and a 4:5 portrait ran off the bottom of the screen. */
.hm-fullsize { position: fixed; inset: 0; z-index: 120; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 24px 22px; background: rgba(35,26,30,.92);
  cursor: zoom-out; }
.hm-fullsize img, .hm-fullsize video { max-width: 100%; max-height: 100%;
  min-height: 0; width: auto; height: auto; object-fit: contain;
  cursor: default; border: 2px solid var(--hm-ink); background: #000; }
.hm-fullsize-close { position: absolute; top: 14px; right: 16px; width: 38px;
  height: 38px; border: 2px solid var(--hm-paper); background: transparent;
  color: var(--hm-paper); font-size: 16px; font-weight: 900; cursor: pointer; }
.hm-fullsize-label { flex: 0 0 auto; color: var(--hm-paper);
  font-size: 11px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; }

.hm-live-stats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
  padding: 0; margin: 10px 0 0; }
.hm-live-stats li { display: flex; align-items: baseline; gap: 6px;
  border: 1.5px solid var(--hm-ink); padding: 4px 9px; background: var(--hm-paper); }
.hm-live-stats b { font-size: 16px; font-weight: 900; line-height: 1; }
.hm-live-stats span { font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--hm-muted); }

.hm-brand, .hm-workspace, .hm-plan-meter, .hm-sidebar-footer { flex: 0 0 auto; }
.hm-nav { display: grid; gap: 5px; padding: 8px 12px;
          flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* A laptop is usually under 900px of usable height, and the full-size sidebar
   needs about 830 before it starts scrolling — so the common case was a nav
   with its last item or two sliced off behind the plan meter. Tightening the
   furniture buys back roughly 130px and everything fits; the nav can still
   scroll below that, it just rarely has to. */
@media (min-width: 981px) and (max-height: 900px) {
  .hm-brand { height: 62px; }
  .hm-nav { gap: 2px; padding: 6px 12px; }
  .hm-nav a { padding: 8px 13px; }
  .hm-workspace { margin: 10px 14px 6px; padding: 8px 10px; }
  .hm-plan-meter { padding: 8px 12px; }
  .hm-sidebar-footer { margin-top: 6px; padding: 8px 12px; }
}
.hm-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-left: 4px solid transparent; color: #ded3d8; font-weight: 750; text-decoration: none; }
.hm-nav a:hover { background: #382a31; color: white; }
.hm-nav a[aria-current="page"] { border-left-color: var(--hm-mauve); background: var(--hm-acid); color: var(--hm-ink); }
.hm-nav-icon { width: 18px; text-align: center; font-weight: 950; }
.hm-nav-count { margin-left: auto; padding: 3px 6px; border: 1px solid var(--hm-ink); background: var(--hm-attention); color: var(--hm-ink); font-size: 9px; }
.hm-plan-meter { display: block; margin: auto 10px 0; padding: 10px 12px; border-radius: 11px;
  background: rgba(255,255,255,0.05); border: 1px solid #4a3941; text-decoration: none;
  color: inherit; transition: background .12s; }
.hm-plan-meter:hover { background: rgba(255,255,255,0.09); }
.hm-meter-head { display: flex; justify-content: space-between; align-items: baseline; }
.hm-meter-head strong { font-size: 12px; color: #fff; }
.hm-meter-head span { font-size: 10px; color: #b4a3ac; }
.hm-meter-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.12);
  margin: 8px 0 7px; overflow: hidden; }
.hm-meter-track span { display: block; height: 100%; border-radius: 4px;
  background: var(--hm-acid); transition: width .3s; }
.hm-meter-foot { display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: #b4a3ac; }
.hm-meter-num { color: #fff; font-weight: 800; }
.hm-upgrade { color: var(--hm-acid); font-weight: 850; text-decoration: none; font-size: 10px; }
.hm-meter-top { color: #d7cbd1; font-weight: 700; }
.hm-sidebar-footer { margin-top: 10px; padding: 12px; border-top: 1px solid #4a3941; }
.hm-user-row { display: flex; align-items: center; gap: 6px; }
.hm-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px;
  flex: 1; min-width: 0; text-decoration: none; color: inherit; transition: background .12s; }
.hm-user:hover { background: rgba(255,255,255,0.06); }
.hm-avatar { width: 35px; height: 35px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid #d7cbd1; background: var(--hm-mauve); color: white; font-weight: 950;
  flex-shrink: 0; }
.hm-user-meta { min-width: 0; }
.hm-user strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 128px; }
.hm-user span { color: #b4a3ac; font-size: 10px; }
.hm-gear { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid #6a535e; border-radius: 9px; color: #ded3d8; transition: all .12s; }
.hm-gear:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: #8a7380; }
.hm-gear svg { width: 17px; height: 17px; }
.hm-footer-active .hm-user, .hm-footer-active .hm-gear { background: rgba(255,255,255,0.1);
  border-color: var(--hm-acid); }
.hm-signout { width: 100%; margin-top: 8px; border: 1px solid #6a535e; border-radius: 8px;
  background: transparent; color: #ded3d8; padding: 8px; font-size: 10px; font-weight: 850;
  text-transform: uppercase; cursor: pointer; transition: all .12s; }
.hm-signout:hover { background: rgba(255,255,255,0.06); color: #fff; }
.hm-main { min-height: 100vh; margin-left: var(--hm-sidebar); }
.hm-topbar { position: sticky; top: 0; z-index: 15; min-height: 62px; padding: 10px 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 2px solid var(--hm-ink); background: rgba(246,244,245,.95); backdrop-filter: blur(8px); }
.hm-crumb { font-size: 13px; font-weight: 850; }
.hm-topbar form { display: flex; align-items: center; gap: 8px; }
.hm-topbar label { font-size: 10px; font-weight: 900; text-transform: uppercase; }
.hm-topbar select { max-width: 250px; border: 1.5px solid var(--hm-ink); background: white; padding: 7px 9px; }
.hm-content { max-width: 1440px; margin: auto; padding: 34px 36px 48px; }
.hm-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.hm-page-head h1 { max-width: 850px; margin: 7px 0 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(38px,4.6vw,66px); line-height: .86; letter-spacing: -2.5px; text-transform: uppercase; }
.hm-page-head p { max-width: 620px; margin: 9px 0 0; color: var(--hm-muted); font-size: 14px; }
.hm-button { display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--hm-ink); padding: 11px 15px; background: white; color: var(--hm-ink); font-size: 11px; font-weight: 900; letter-spacing: .25px; text-decoration: none; text-transform: uppercase; }
.hm-button-primary { background: var(--hm-ink); color: white; box-shadow: 4px 4px 0 var(--hm-acid); }
.hm-button-acid { background: var(--hm-acid); box-shadow: 3px 3px 0 var(--hm-ink); }
.hm-button-danger { border-color: var(--hm-danger); color: var(--hm-danger); }
.hm-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 26px; }
.hm-metric { position: relative; min-height: 133px; overflow: hidden; border: 2px solid var(--hm-ink); background: var(--hm-surface); padding: 16px; }
.hm-metric-attention { background: var(--hm-attention); }
.hm-metric-success { background: var(--hm-acid); }
.hm-metric-dark { background: var(--hm-ink); color: white; }
.hm-metric-value { display: block; margin: 20px 0 5px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 44px; line-height: 1; letter-spacing: -1px; }
.hm-metric p { margin: 0; font-size: 12px; font-weight: 750; }
.hm-corner { position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: var(--hm-paper); clip-path: polygon(100% 0,0 0,100% 100%); }
.hm-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(280px,.8fr); gap: 18px; }
.hm-side-stack { display: grid; gap: 18px; align-content: start; }
.hm-panel { border: 2px solid var(--hm-ink); background: var(--hm-surface); }
.hm-panel-head { min-height: 58px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--hm-ink); }
.hm-panel-head h2 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 22px; letter-spacing: -.5px; text-transform: uppercase; }
.hm-panel-link { border: 0; background: transparent; font-size: 10px; font-weight: 900; text-decoration: underline; text-transform: uppercase; }
.hm-review-row { display: grid; grid-template-columns: 86px minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--hm-soft); }
.hm-review-row:last-child { border-bottom: 0; }
.hm-content-tile { position: relative; width: 86px; height: 86px; aspect-ratio: 1; flex: 0 0 86px; box-sizing: border-box; overflow: hidden; display: grid; place-items: center; border: 2px solid var(--hm-ink); background: linear-gradient(135deg,var(--hm-paper),#ded4d9); font-family: Impact, sans-serif; font-size: 23px; text-transform: uppercase; }
.hm-content-tile img, .hm-content-tile video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.hm-item-title { margin-bottom: 7px; font-weight: 900; }
.hm-item-copy { margin: 7px 0; color: var(--hm-muted); font-size: 11px; line-height: 1.5; }
.hm-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--hm-ink); background: var(--hm-paper); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.hm-chip-attention { background: #fff0c2; }
.hm-chip-success { background: var(--hm-acid); }
.hm-chip-published { background: #e4edff; }
.hm-review-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.hm-review-actions .hm-button { padding: 9px 10px; }
.hm-agenda { padding: 4px 18px 12px; }
.hm-agenda-item { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hm-soft); }
.hm-agenda-item:last-child { border-bottom: 0; }
.hm-datebox { padding: 6px 3px; border: 1.5px solid var(--hm-ink); background: var(--hm-paper); font-family: Impact, sans-serif; font-size: 20px; line-height: 1; text-align: center; }
.hm-datebox small { display: block; margin-top: 3px; font-family: Inter, sans-serif; font-size: 8px; }
.hm-agenda-item strong { font-size: 12px; }
.hm-agenda-item p { margin: 4px 0; color: var(--hm-muted); font-size: 10px; }
.hm-progress { padding: 19px; }
.hm-progress-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; }
.hm-track { height: 13px; margin: 10px 0 13px; border: 1.5px solid var(--hm-ink); background: var(--hm-paper); }
.hm-fill { height: 100%; background: var(--hm-acid); border-right: 1.5px solid var(--hm-ink); }
.hm-activity { padding: 5px 18px 12px; }
.hm-activity p { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--hm-soft); font-size: 11px; }
.hm-content-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(310px,.72fr); gap: 18px; }
.hm-content-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.hm-content-card { border: 2px solid var(--hm-ink); background: white; }
.hm-content-card-selected { box-shadow: 6px 6px 0 var(--hm-mauve); }
.hm-content-preview { position: relative; min-height: 180px; display: grid; place-items: center; overflow: hidden; border-bottom: 2px solid var(--hm-ink); background: linear-gradient(135deg,#e9e3e6,#d7cbd1); color: var(--hm-ink); font-family: Impact, sans-serif; font-size: 42px; text-transform: uppercase; }
.hm-content-preview img { width: 100%; height: 100%; min-height: 180px; aspect-ratio: 1; object-fit: cover; }
.hm-format { position: absolute; top: 9px; left: 9px; padding: 5px 7px; background: var(--hm-ink); color: white; font-family: Inter,sans-serif; font-size: 9px; font-weight: 900; }
.hm-card-body { padding: 14px; }
.hm-card-body h3 { margin: 0 0 7px; font-size: 14px; }
.hm-card-body p { margin: 9px 0 12px; color: var(--hm-muted); font-size: 11px; line-height: 1.45; }
.hm-detail { position: sticky; top: 80px; align-self: start; border: 2px solid var(--hm-ink); background: white; }
.hm-detail-accent { height: 9px; border-bottom: 2px solid var(--hm-ink); background: var(--hm-mauve); }
.hm-detail-body { padding: 19px; }
.hm-detail h2 { margin: 5px 0 13px; font-family: Impact,sans-serif; font-size: 27px; text-transform: uppercase; }
.hm-caption { margin: 14px 0; padding: 13px; border-left: 4px solid var(--hm-mauve); background: var(--hm-paper); font-size: 12px; line-height: 1.55; }
.hm-form { display: grid; gap: 14px; }
.hm-form label { display: grid; gap: 6px; font-size: 11px; font-weight: 850; }
.hm-form input,.hm-form textarea,.hm-form select { width: 100%; border: 1.5px solid var(--hm-ink); background: white; padding: 10px 11px; color: var(--hm-ink); }
.hm-form textarea { resize: vertical; }
/* align-items: start, or a short field stretches to match a tall neighbour and
   you get a 100px-high timezone dropdown sitting next to a block of buttons. */
.hm-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px; align-items: start; }
/* a field whose content is wider than half the form takes the whole row */
.hm-form-grid > .hm-form-wide { grid-column: 1 / -1; }
.hm-form-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.hm-profile-summary { padding: 18px; border-bottom: 1px solid var(--hm-soft); }
.hm-profile-summary p { margin: 8px 0; font-size: 12px; line-height: 1.5; }
.hm-report { padding: 18px; border-bottom: 1px solid var(--hm-soft); }
.hm-report:last-child { border-bottom: 0; }
.hm-report-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.hm-report-stat { padding: 10px; border: 1px solid var(--hm-ink); background: var(--hm-paper); }
.hm-report-stat strong { display: block; font-size: 20px; }
.hm-report-stat span { font-size: 9px; text-transform: uppercase; }
.hm-empty { padding: 34px 20px; text-align: center; }
.hm-empty strong { display: block; font-family: Impact,sans-serif; font-size: 24px; text-transform: uppercase; }
.hm-empty p { max-width: 520px; margin: 8px auto 0; color: var(--hm-muted); font-size: 12px; line-height: 1.5; }
.hm-status { margin: 0 0 18px; padding: 12px 14px; border: 2px solid var(--hm-ink); background: var(--hm-acid); font-size: 12px; font-weight: 800; }
.hm-status-error { background: #fee4e2; color: #7a271a; }
.hm-footnote { display: block; margin-top: 28px; color: var(--hm-muted); font-size: 9px; text-align: center; }
.hm-head-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.hm-upload-trigger { white-space:nowrap; }
.hm-upload-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; width:100vw; max-width:100%; overflow:hidden; padding:20px; background:rgba(35,26,30,.72); backdrop-filter:blur(5px); }
.hm-upload-dialog { width:min(720px,100%); max-height:min(820px,calc(100vh - 40px)); overflow:auto; overflow-x:hidden; border:2px solid var(--hm-ink); background:var(--hm-surface); box-shadow:9px 9px 0 var(--hm-acid); }
.hm-upload-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:2px solid var(--hm-ink); background:white; }
.hm-upload-head>div { min-width:0; }
.hm-upload-head h2 { margin:4px 0 0; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:30px; text-transform:uppercase; }
.hm-upload-close { width:38px; height:38px; border:2px solid var(--hm-ink); background:var(--hm-paper); color:var(--hm-ink); font-size:26px; line-height:1; }
.hm-upload-body { padding:20px; }
.hm-upload-body>p { margin:0 0 16px; color:var(--hm-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.hm-upload-drop { display:grid; justify-items:center; gap:8px; padding:30px 18px; border:2px dashed var(--hm-mauve); background:var(--hm-paper); text-align:center; }
.hm-upload-drop strong { font-family:Impact,sans-serif; font-size:24px; text-transform:uppercase; }
.hm-upload-drop span,.hm-upload-drop small { color:var(--hm-muted); font-size:11px; }
.hm-upload-list { display:grid; gap:8px; margin:16px 0; }
.hm-upload-file { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:12px 13px; border:1.5px solid var(--hm-ink); background:white; }
.hm-upload-file strong,.hm-upload-file span,.hm-upload-file em { display:block; }
.hm-upload-file strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.hm-upload-file span { margin-top:3px; color:var(--hm-muted); font-size:9px; }
.hm-upload-file em { margin-top:4px; color:var(--hm-danger); font-size:10px; font-style:normal; }
.hm-upload-file-actions { text-align:right; }
.hm-upload-file-actions button { margin-top:4px; border:0; background:transparent; color:var(--hm-danger); font-size:9px; font-weight:850; text-decoration:underline; text-transform:uppercase; }
.hm-upload-progress { position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--hm-soft); }
.hm-upload-progress i { display:block; height:100%; background:var(--hm-acid); }
.hm-upload-rights { display:flex; align-items:flex-start; gap:10px; margin:16px 0; padding:13px; border-left:4px solid var(--hm-acid); background:var(--hm-paper); font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.hm-upload-rights input { flex:0 0 auto; width:18px; height:18px; accent-color:var(--hm-ink); }
.hm-upload-message { padding:10px 12px; border:1px solid var(--hm-ink); background:var(--hm-acid); font-size:11px; font-weight:800; }
.hm-upload-body>.hm-form-actions { position:sticky; bottom:-20px; z-index:2; margin:16px -20px -20px; padding:12px 20px 20px; border-top:1px solid var(--hm-soft); background:linear-gradient(to bottom,rgba(255,255,255,.96),#fff 30%); }
.hm-onboarding-success { margin-bottom:20px; padding:20px 22px; border:2px solid var(--hm-ink); background:var(--hm-acid); box-shadow:5px 5px 0 var(--hm-ink); }
.hm-onboarding-success h2 { margin:5px 0 6px; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:30px; text-transform:uppercase; }
.hm-onboarding-success p { margin:0; max-width:780px; font-size:12px; line-height:1.5; }
.hm-onboarding-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; align-items:start; }
.hm-onboarding-steps { display:grid; gap:14px; }
.hm-onboarding-step { border:2px solid var(--hm-ink); background:white; }
.hm-onboarding-step>header { display:grid; grid-template-columns:54px minmax(0,1fr); gap:14px; padding:17px 18px; border-bottom:1px solid var(--hm-soft); }
.hm-step-number { width:48px; height:48px; display:grid; place-items:center; border:2px solid var(--hm-ink); background:var(--hm-paper); font-family:Impact,sans-serif; font-size:21px; }
.hm-step-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hm-step-title h2 { margin:0; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:25px; letter-spacing:-.35px; text-transform:uppercase; }
.hm-onboarding-step>header p { margin:5px 0 0; color:var(--hm-muted); font-size:11px; line-height:1.5; }
.hm-step-body { padding:18px; }
.hm-step-body>.hm-profile-summary { margin:-18px -18px 18px; }
.hm-onboarding-action { padding-top:0; }
.hm-form-help { margin:0; color:var(--hm-muted); font-size:10px; line-height:1.5; }
.hm-onboarding-summary { position:sticky; top:80px; padding:19px; border:2px solid var(--hm-ink); background:var(--hm-ink); color:white; box-shadow:5px 5px 0 var(--hm-acid); }
.hm-onboarding-summary>.hm-eyebrow { color:#cdbfc6; }
.hm-onboarding-summary>strong { display:block; margin:12px 0 4px; font-family:Impact,sans-serif; font-size:48px; line-height:1; }
.hm-onboarding-summary .hm-track { border-color:white; background:#4a3941; }
.hm-onboarding-summary .hm-fill { border-color:white; }
.hm-onboarding-summary>p { color:#d7cbd1; font-size:10px; line-height:1.5; }
.hm-setup-line { display:grid; grid-template-columns:24px 1fr; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid #4a3941; font-size:11px; }
.hm-setup-line span { width:22px; height:22px; display:grid; place-items:center; border:1px solid #74606a; background:#30242a; color:var(--hm-acid); }
.hm-summary-note { padding:10px; border-left:3px solid var(--hm-attention); background:#30242a; }
.hm-inline-complete { margin:0; padding:12px; border-left:4px solid var(--hm-acid); background:var(--hm-paper); font-size:12px; font-weight:800; }
.hm-approval-options { display:grid; gap:8px; }
.hm-approval-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px; border:1.5px solid var(--hm-ink); background:var(--hm-paper); }
.hm-approval-option-selected { border-width:2px; background:#f2f9d8; }
.hm-approval-option strong { display:block; font-size:12px; }
.hm-approval-option p { margin:4px 0 0; color:var(--hm-muted); font-size:10px; line-height:1.4; }
.hm-queue-panel { border:1px solid #ded8d2; background:var(--hm-surface); box-shadow:0 8px 18px rgba(35,26,30,.045); }
.hm-queue-table-wrap { width:100%; overflow-x:auto; }
.hm-queue-table { width:100%; min-width:840px; border-collapse:collapse; font-size:11px; }
.hm-queue-table caption { padding:16px 18px; border-bottom:1px solid var(--hm-soft); color:var(--hm-muted); font-size:10px; font-weight:850; text-align:left; text-transform:uppercase; }
.hm-queue-table th,.hm-queue-table td { padding:13px 14px; border-bottom:1px solid var(--hm-soft); text-align:left; vertical-align:top; }
.hm-queue-table th { background:var(--hm-paper); color:var(--hm-muted); font-size:9px; letter-spacing:.8px; text-transform:uppercase; }
.hm-queue-table td strong { font-size:11px; }
.hm-queue-table .hm-chip { margin-top:4px; white-space:nowrap; }
.hm-chip-danger { border-color:#a73a32; background:#fee4e2; color:#7a271a; }
.hm-queue-cards { display:none; }
.hm-queue-card { min-width:0; padding:15px; border-bottom:1px solid var(--hm-soft); background:white; }
.hm-queue-card:last-child { border-bottom:0; }
.hm-queue-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hm-queue-card header strong { display:block; margin-top:4px; font-size:13px; }
.hm-queue-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 0; }
.hm-queue-card dl div { min-width:0; }
.hm-queue-card dt { color:var(--hm-muted); font-size:9px; font-weight:850; letter-spacing:.7px; text-transform:uppercase; }
.hm-queue-card dd { margin:4px 0 0; overflow-wrap:anywhere; font-size:11px; font-weight:750; }
.hm-mobile-nav { display: none; }
.hm-login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px,.85fr) minmax(400px,1.15fr); }
.hm-login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; background: var(--hm-ink); color: white; }
.hm-login-brand::after { content: ""; position: absolute; right: -100px; bottom: -100px; width: 360px; height: 360px; border: 48px solid var(--hm-acid); border-radius: 50%; opacity: .9; }
.hm-login-brand h1 { position: relative; z-index: 1; max-width: 620px; margin: 24px 0; font-family: Impact,sans-serif; font-size: clamp(48px,7vw,98px); line-height: .86; text-transform: uppercase; }
.hm-login-brand p { position: relative; z-index: 1; max-width: 420px; color: #d7cbd1; line-height: 1.55; }
.hm-login-panel { display: grid; place-items: center; padding: 34px; }
.hm-login-card { width: min(460px,100%); border: 2px solid var(--hm-ink); background: white; box-shadow: 8px 8px 0 var(--hm-acid); }
.hm-login-card header { padding: 22px; border-bottom: 2px solid var(--hm-ink); }
.hm-login-card header h2 { margin: 4px 0 0; font-family: Impact,sans-serif; font-size: 32px; text-transform: uppercase; }
.hm-login-body { padding: 22px; }
.hm-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--hm-muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.hm-divider::before,.hm-divider::after { content: ""; flex: 1; height: 1px; background: var(--hm-soft); }
.hm-signup-card { width:min(620px,100%); }
.hm-signup-card header p { margin:8px 0 0; color:var(--hm-muted); line-height:1.5; }
.hm-signup-points { position:relative; z-index:1; display:grid; gap:8px; margin-top:26px; }
.hm-signup-points span { width:max-content; max-width:100%; border:1px solid #75666e; padding:8px 10px; color:white; font-size:10px; font-weight:900; text-transform:uppercase; }
.hm-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.hm-login-switch { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--hm-soft); color:var(--hm-muted); font-size:11px; }
.hm-login-switch a { color:var(--hm-ink); font-weight:900; }
.hm-signup-success { display:grid; gap:12px; }
.hm-signup-success strong { font-family:Impact,sans-serif; font-size:30px; text-transform:uppercase; }
.hm-signup-success p { margin:0; color:var(--hm-muted); line-height:1.55; }
.hm-signup-flow { min-height:100vh; display:grid; grid-template-columns:42% 58%; background:#f8f5ef; }
.hm-signup-brand { position:relative; display:flex; min-height:100vh; flex-direction:column; justify-content:space-between; overflow:hidden; padding:48px 54px; background:var(--hm-ink); color:#fff; }
.hm-signup-logo { position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:max-content; color:#fff; font-size:17px; font-weight:950; letter-spacing:-.8px; text-decoration:none; }
.hm-signup-logo span { display:grid; width:28px; height:28px; place-items:center; background:var(--hm-acid); color:var(--hm-ink); font-size:9px; font-weight:1000; letter-spacing:-.5px; }
.hm-signup-brand-copy { position:relative; z-index:1; margin:auto 0; }
.hm-signup-eyebrow,.hm-signup-kicker { margin:0; color:var(--hm-muted); font-size:10px; font-weight:950; letter-spacing:1.45px; line-height:1; text-transform:uppercase; }
.hm-signup-eyebrow { color:var(--hm-acid); }
.hm-signup-brand h1 { max-width:520px; margin:17px 0 18px; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:clamp(43px,4.2vw,62px); font-weight:850; letter-spacing:-.075em; line-height:1.01; }
.hm-signup-brand-copy>p:not(.hm-signup-eyebrow) { max-width:450px; margin:0; color:#d8cfd2; font-size:17px; line-height:1.55; }
.hm-signup-brand small { position:relative; z-index:1; color:#96878e; font-size:10px; }
.hm-signup-signal { position:absolute; right:-278px; bottom:-222px; width:480px; height:480px; border:54px solid var(--hm-acid); border-radius:50%; }
.hm-signup-signal::after { position:absolute; top:88px; left:88px; width:180px; height:180px; border:2px solid #f8f5ef; border-radius:50%; content:""; }
.hm-signup-steps { display:grid; gap:11px; margin:30px 0 0; padding:0; list-style:none; }
.hm-signup-steps li { display:flex; align-items:center; gap:12px; color:#aa9da3; font-size:12px; }
.hm-signup-steps span { display:grid; width:25px; height:25px; place-items:center; border:1px solid #5a4b51; color:#d8cfd2; font-size:10px; }
.hm-signup-steps b { font-weight:600; }
.hm-signup-steps .is-current { color:white; }
.hm-signup-steps .is-current span { border-color:var(--hm-acid); background:var(--hm-acid); color:var(--hm-ink); font-weight:950; }
.hm-signup-steps .is-complete { color:#e6dde0; }
.hm-signup-steps .is-complete span { background:#3c3035; color:var(--hm-acid); }
.hm-signup-panel { display:grid; min-width:0; place-items:center; padding:60px; background-color:#f8f5ef; background-image:linear-gradient(rgba(35,26,30,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(35,26,30,.065) 1px,transparent 1px); background-size:14px 14px; }
.hm-signup-card { width:min(580px,100%); border:1px solid #ded8d2; background:#fff; padding:28px 30px; box-shadow:0 12px 24px rgba(35,26,30,.08); }
.hm-signup-card h2 { margin:9px 0 7px; font-size:29px; font-weight:800; letter-spacing:-.06em; line-height:1.03; }
.hm-signup-subcopy { margin:0; color:#6f6568; font-size:13px; line-height:1.5; }
.hm-signup-form-body { margin-top:22px; }
.hm-signup-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.hm-signup-form label { display:grid; gap:6px; color:#30272a; font-size:10px; font-weight:850; }
.hm-signup-form input { min-width:0; height:40px; border:1px solid #d4cec8; border-radius:0; background:#fbfaf7; padding:0 11px; color:var(--hm-ink); font-size:11px; outline-offset:2px; }
.hm-signup-form input:focus { border-color:var(--hm-ink); outline:2px solid var(--hm-acid); }
.hm-signup-form-full,.hm-signup-form .hm-signup-button { grid-column:1/-1; }
.hm-signup-button { display:flex; min-height:42px; align-items:center; justify-content:center; gap:8px; border:1px solid #b6d92a; background:var(--hm-acid); color:var(--hm-ink); font-size:11px; font-weight:900; text-align:center; text-decoration:none; }
.hm-signup-button:hover { background:#d8ff39; }
.hm-signup-note { margin:11px 0 0; color:#756d6f; font-size:9px; line-height:1.45; text-align:center; }
.hm-signup-links { margin:15px 0 0; color:#756d6f; font-size:10px; text-align:center; }
.hm-signup-links a { color:var(--hm-ink); font-weight:900; }
.hm-signup-message { margin:0 0 14px; padding:10px 11px; border:1px solid var(--hm-ink); background:#edffd0; font-size:11px; font-weight:750; }
.hm-signup-message-error { border-color:#a73a32; background:#fee4e2; color:#7a271a; }
.hm-signup-card-centered { max-width:520px; padding:34px 42px; text-align:center; }
.hm-signup-card-centered .hm-signup-subcopy { max-width:390px; margin-right:auto; margin-left:auto; }
.hm-signup-card-centered .hm-signup-button { width:100%; margin-top:20px; }
.hm-signup-icon { display:grid; width:55px; height:55px; place-items:center; margin:0 auto 17px; border:1px solid #c7e839; background:#f2ffd1; color:var(--hm-ink); font-size:20px; }
.hm-signup-email { margin:17px 0; padding:11px; background:#f8f6f1; color:var(--hm-ink); font-size:11px; font-weight:900; }
.hm-signup-loader { width:42px; height:42px; margin:0 auto 18px; border:4px solid #e6e1dc; border-top-color:var(--hm-acid); border-radius:50%; animation:hm-spin .9s linear infinite; }
@keyframes hm-spin { to { transform:rotate(360deg); } }
/* The authenticated Setup handoff uses the same restrained paper/card language without changing any tenant or CSRF controls. */
.hm-main .hm-onboarding-layout { gap:22px; }
.hm-main .hm-onboarding-step { border:1px solid #ded8d2; box-shadow:0 8px 18px rgba(35,26,30,.045); }
.hm-main .hm-onboarding-step>header { border-bottom:1px solid #e5dfd9; }
.hm-main .hm-step-number { border-width:1px; background:#f2ffd1; font-family:Inter,ui-sans-serif,sans-serif; font-size:14px; font-weight:900; }
.hm-main .hm-step-title h2 { font-family:Inter,ui-sans-serif,sans-serif; font-size:24px; font-weight:850; letter-spacing:-1.1px; text-transform:none; }
.hm-main .hm-onboarding-summary { border-width:1px; box-shadow:0 8px 18px rgba(35,26,30,.13); }
@media (max-width: 980px) {
  .hm-summary { grid-template-columns: repeat(2,1fr); }
  .hm-dashboard-grid,.hm-content-layout,.hm-onboarding-layout { grid-template-columns: 1fr; }
  .hm-onboarding-summary { position:static; order:-1; }
  .hm-detail { position: static; }
  .hm-report-stats { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 700px) {
  .hm-sidebar { display: none; }
  .hm-main { margin-left: 0; padding-bottom: 66px; }
  .hm-topbar { min-height: 54px; padding: 8px 15px; }
  /* the real wordmark, not two letters in a square. Dark variant: the topbar
     is light, and the light logo on it is invisible. */
  .hm-topbar::before { content: ""; flex: 0 0 98px; height: 27px;
    background: url("/static/hm-logo-dark.png") left center / contain no-repeat; }
  .hm-crumb { display: none; }
  .hm-topbar label { display: none; }
  .hm-topbar select { max-width: 180px; }
  .hm-content { padding: 23px 15px 34px; }
  .hm-page-head { display: block; margin-bottom: 22px; }
  .hm-page-head h1 { font-size: 43px; letter-spacing: -1.8px; }
  .hm-page-head p { font-size: 12px; }
  .hm-page-head .hm-button { margin-top: 16px; }
  .hm-head-actions { justify-content:flex-start; }
  .hm-head-actions .hm-button { flex:1; margin-top:16px; }
  .hm-upload-backdrop { align-items:end; padding:0; }
  .hm-upload-dialog { width:100vw; max-width:100vw; max-height:92vh; border-width:2px 0 0; box-shadow:none; }
  .hm-upload-head { padding:15px; }
  .hm-upload-head h2 { font-size:25px; }
  .hm-upload-body { min-width:0; padding:15px 15px 24px; }
  .hm-upload-drop { padding:22px 12px; }
  .hm-upload-file { grid-template-columns:minmax(0,1fr) 70px; }
  .hm-upload-body>.hm-form-actions { bottom:-24px; margin:16px -15px -24px; padding:12px 15px 20px; }
  .hm-upload-body .hm-form-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hm-upload-body .hm-form-actions .hm-button { min-width:0; width:100%; padding:11px 6px; font-size:10px; }
  .hm-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hm-metric { min-height: 105px; padding: 12px; }
  .hm-metric-value { margin-top: 15px; font-size: 34px; }
  .hm-metric p { font-size: 10px; }
  .hm-review-row { grid-template-columns: 68px 1fr; padding: 12px; gap: 11px; }
  .hm-content-tile { width: 68px; height: 68px; font-size: 18px; }
  .hm-review-actions { grid-column: 1/-1; }
  .hm-review-actions .hm-button { flex: 1; }
  .hm-content-grid { grid-template-columns: 1fr; }
  .hm-detail { order: -1; }
  .hm-form-grid { grid-template-columns: 1fr; }
  .hm-onboarding-step>header { grid-template-columns:42px minmax(0,1fr); padding:14px; gap:11px; }
  .hm-step-number { width:40px; height:40px; font-size:18px; }
  .hm-step-title { align-items:flex-start; }
  .hm-step-title h2 { font-size:21px; }
  .hm-step-body { padding:14px; }
  .hm-step-body>.hm-profile-summary { margin:-14px -14px 14px; }
  .hm-approval-option { grid-template-columns:1fr; }
  .hm-approval-option .hm-button { width:100%; }
  .hm-report-stats { grid-template-columns: repeat(2,1fr); }
  .hm-queue-table-wrap { display:none; }
  .hm-queue-cards { display:grid; min-width:0; }
  .hm-queue-card { max-width:100%; overflow:hidden; }
  .hm-queue-card dl { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hm-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 66px; display: grid; grid-template-columns: repeat(5,1fr); border-top: 2px solid var(--hm-ink); background: var(--hm-ink); }
  .hm-mobile-nav-staff { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .hm-mobile-nav a { display: grid; place-items: center; align-content: center; color: #cdbfc6; font-size: 9px; font-weight: 850; text-decoration: none; text-transform: uppercase; }
  .hm-mobile-nav a span { display: block; font-size: 17px; }
  .hm-mobile-nav a[aria-current="page"] { background: var(--hm-acid); color: var(--hm-ink); }
  /* the fifth slot is "More" — same shape as a link, but a button */
  .hm-mobile-nav button { display: grid; place-items: center; align-content: center;
    background: none; border: 0; color: #cdbfc6; font: inherit; font-size: 9px;
    font-weight: 850; text-transform: uppercase; cursor: pointer; }
  .hm-mobile-nav button span { display: block; font-size: 17px; }
  .hm-more-sheet { position: fixed; inset: 0; z-index: 40; }
  .hm-more-scrim { position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; padding: 0; background: rgba(35,26,30,.55); }
  .hm-more-panel { position: absolute; left: 0; right: 0; bottom: 66px;
    max-height: 70vh; overflow-y: auto; background: var(--hm-ink);
    border-top: 2px solid var(--hm-acid); padding: 14px 16px 18px;
    display: grid; gap: 2px; }
  .hm-more-panel .hm-label { color: #b4a3ac; margin-bottom: 6px; }
  .hm-more-panel a, .hm-more-panel button { display: flex; align-items: center;
    gap: 12px; padding: 13px 10px; color: #ded3d8; font: inherit; font-weight: 750;
    text-decoration: none; background: none; border: 0; text-align: left;
    width: 100%; cursor: pointer; border-radius: 8px; }
  .hm-more-panel a:active, .hm-more-panel button:active { background: #382a31; }
  .hm-login-shell { grid-template-columns: 1fr; }
  .hm-login-brand { min-height: 310px; padding: 28px; }
  .hm-login-brand h1 { font-size: 52px; }
  .hm-login-panel { padding: 25px 15px 40px; }
  .hm-signup-flow { display:block; min-height:100vh; }
  .hm-signup-brand { min-height:230px; padding:20px 21px 17px; }
  .hm-signup-logo { font-size:18px; }
  .hm-signup-logo span { width:30px; height:30px; }
  .hm-signup-brand-copy { margin:26px 0 0; }
  .hm-signup-brand h1 { max-width:350px; margin:10px 0 7px; font-size:34px; letter-spacing:-.075em; }
  .hm-signup-brand-copy>p:not(.hm-signup-eyebrow) { max-width:350px; font-size:13px; line-height:1.45; }
  .hm-signup-brand small { display:none; }
  .hm-signup-signal { right:-142px; bottom:-152px; width:250px; height:250px; border-width:28px; }
  .hm-signup-signal::after { top:48px; left:48px; width:94px; height:94px; }
  .hm-signup-steps { display:flex; gap:10px; margin-top:13px; }
  .hm-signup-steps li { gap:0; }
  .hm-signup-steps span { width:24px; height:24px; }
  .hm-signup-steps b { display:none; }
  .hm-signup-panel { min-height:614px; padding:48px 17px 50px; place-items:start center; background-size:14px 14px; }
  .hm-signup-card { width:100%; min-width:0; max-width:100%; padding:27px 24px; box-shadow:0 8px 18px rgba(35,26,30,.075); }
  .hm-signup-card h2 { font-size:26px; }
  .hm-signup-subcopy { font-size:13px; }
  .hm-signup-form { grid-template-columns:1fr; gap:12px; }
  .hm-signup-form-full,.hm-signup-form .hm-signup-button { grid-column:auto; }
  .hm-signup-form input { height:44px; font-size:13px; }
  .hm-signup-button { min-height:48px; font-size:12px; }
  .hm-signup-card-centered { padding:31px 24px; }
}

/* ---- factory additions (below this line only; ported rules above stay pristine) ---- */
.hm-nav svg, .hm-mobile-nav svg { width: 18px; height: 18px; flex: none; }
.hm-nav-icon { display: grid; place-items: center; }
.hm-user > div { min-width: 0; }
.hm-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 128px; }
.hm-panel-pad { padding: 18px; }
.hm-panel .hm-agenda { padding: 6px 18px; }
.hm-panel .hm-activity { padding: 16px 18px; display: grid; gap: 10px; font-size: 13px; }
.hm-panel .hm-activity p { margin: 0; line-height: 1.5; }
.hm-content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.hm-content-card { border: 2px solid var(--hm-ink); background: var(--hm-surface); display: flex; flex-direction: column; }
.hm-content-preview { position: relative; aspect-ratio: 1; overflow: hidden; border-bottom: 2px solid var(--hm-ink); background: linear-gradient(135deg, var(--hm-paper), #ded4d9); display: grid; place-items: center; font-family: Impact, sans-serif; font-size: 26px; }
.hm-content-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-content-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.hm-card-body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.hm-card-body h3 { margin: 0; font-size: 14px; line-height: 1.35; }
.hm-card-body p { margin: 0; color: var(--hm-muted); font-size: 11px; line-height: 1.5; }
.hm-review-shell { max-width: 560px; margin: 0 auto; padding: 22px 18px 48px; }
.hm-review-brandbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.hm-review-shell h1 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(30px, 8vw, 44px); line-height: .9; letter-spacing: -1.5px; text-transform: uppercase; margin: 6px 0 4px; }
.hm-review-media { border: 2px solid var(--hm-ink); margin: 14px 0; display: block; width: 100%; box-shadow: 6px 6px 0 var(--hm-soft); }
.hm-review-caption { border: 2px solid var(--hm-ink); background: var(--hm-surface); padding: 15px 16px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; margin: 14px 0 8px; }
.hm-review-tags { color: var(--hm-muted); font-size: 12px; margin-bottom: 18px; }
.hm-review-decide { display: grid; gap: 12px; margin-top: 18px; }
.hm-review-decide button { width: 100%; padding: 16px; }
.hm-review-done { border: 2px solid var(--hm-ink); background: var(--hm-acid); padding: 20px; text-align: center; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; box-shadow: 6px 6px 0 var(--hm-ink); margin-top: 20px; }
.hm-connect-cta { display: grid; gap: 10px; padding: 16px 18px; }
.hm-connect-cta p { margin: 0; font-size: 12px; color: var(--hm-muted); line-height: 1.5; }
.hm-brand-logo { height: 32px; width: auto; display: block; }
.hm-brand-logo-lg { height: 44px; }
/* calendar */
.hm-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.hm-cal-title { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 30px; text-transform: uppercase; letter-spacing: -0.5px; }
.hm-cal { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border: 2px solid var(--hm-ink); background: var(--hm-ink); gap: 1px; }
.hm-cal-dow { background: var(--hm-ink); color: var(--hm-paper); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 10px; }
.hm-cal-day { background: var(--hm-surface); min-height: 118px; padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.hm-cal-day.hm-cal-out { background: var(--hm-paper); }
.hm-cal-day.hm-cal-over { outline: 3px dashed var(--hm-mauve); outline-offset: -4px; background: #f3eef1; }
.hm-cal-date { font-size: 11px; font-weight: 900; color: var(--hm-muted); }
.hm-cal-day.hm-cal-today .hm-cal-date { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--hm-acid); color: var(--hm-ink); border: 1px solid var(--hm-ink); }
.hm-cal-item { border: 1.5px solid var(--hm-ink); background: var(--hm-paper); padding: 6px 8px; font-size: 10.5px; font-weight: 750; line-height: 1.3; box-shadow: 2px 2px 0 var(--hm-soft); }
.hm-cal-item small { display: block; color: var(--hm-muted); font-weight: 850; text-transform: uppercase; font-size: 8.5px; letter-spacing: 0.06em; margin-top: 2px; }
.hm-cal-item[draggable="true"] { cursor: grab; }
.hm-cal-item[draggable="true"]:active { cursor: grabbing; }
.hm-cal-item.hm-cal-live { background: #e4edff; }
.hm-cal-item.hm-cal-dragging { opacity: 0.4; }
.hm-cal-hint { color: var(--hm-muted); font-size: 12px; margin-top: 10px; }
@media (max-width: 700px) { .hm-cal-day { min-height: 84px; } .hm-cal { font-size: 9px; } }
/* modal + interaction polish */
/* platform-mockup carousel: scroll-snap = native swipe on phones */
.hm-looks { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  align-items: flex-start; }
.hm-look { flex: 0 0 min(280px, 82vw); scroll-snap-align: center;
  border: 2px solid var(--hm-ink); background: #fff; color: #111;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
/* phone-shaped formats get a phone-shaped card so card heights stay comparable */
.hm-look-tall { flex-basis: min(205px, 58vw); }
.hm-look-state { padding: 0 10px 8px; font-size: 10.5px; color: #737373;
  display: flex; justify-content: space-between; align-items: center; }
.hm-look-state b { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--hm-ink); background: var(--hm-acid, #c9f227); padding: 2px 6px;
  border: 1px solid var(--hm-ink); }
.hm-look-media { width: 100%; object-fit: cover; display: block; background: #111; }
.hm-look-flag { display: block; width: 100%; border: none;
  border-top: 1px solid var(--hm-ink); background: var(--hm-paper); padding: 9px;
  font-size: 12px; font-weight: 700; cursor: pointer; color: var(--hm-ink); }
.hm-looks-nav { display: none; gap: 6px; justify-content: flex-end; margin: 0 2px 6px; }
@media (hover: hover) { .hm-looks-nav { display: flex; } }
.hm-looks-nav button { width: 32px; height: 32px; border: 1.5px solid var(--hm-ink);
  background: var(--hm-paper); font-weight: 900; cursor: pointer; }
/* the chrome: each platform's real furniture, kept faithful but lightweight */
.hm-mock-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.hm-mock-ava { width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #d3d3d3, #a8a8a8); color: #fff; font-size: 11px;
  font-weight: 700; display: grid; place-items: center; }
.hm-mock-name { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.hm-mock-sub { font-size: 11px; color: #737373; line-height: 1.25; }
.hm-mock-more { margin-left: auto; color: #737373; font-weight: 700; letter-spacing: 1px; }
.hm-mock-bar { display: flex; align-items: center; gap: 14px; padding: 8px 10px 4px;
  color: #262626; }
.hm-mock-bar svg { width: 21px; height: 21px; display: block; }
.hm-mock-bar .hm-right { margin-left: auto; }
.hm-mock-cap { padding: 4px 10px 12px; font-size: 12px; line-height: 1.45; color: #111; }
.hm-mock-cap .hm-look-tags { color: #00376b; }
.hm-mock-likes { padding: 2px 10px 0; font-size: 12px; font-weight: 600; }
/* facebook / linkedin: text above media, reaction strip below */
.hm-mock-fbbar { display: flex; border-top: 1px solid #e4e6eb; margin: 6px 8px 0;
  padding: 3px 0; }
.hm-mock-fbbar span { flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 12px; font-weight: 600; color: #65676b; padding: 6px 0; }
.hm-mock-fbbar svg { width: 17px; height: 17px; }
/* x: rounded media, muted action counts */
.hm-mock-x .hm-mock-media-wrap { padding: 0 10px 4px; }
.hm-mock-x .hm-look-media { border-radius: 14px; border: 1px solid #e1e8ed; }
.hm-mock-xbar { display: flex; justify-content: space-between; padding: 6px 22px 10px 14px;
  color: #536471; }
.hm-mock-xbar svg { width: 18px; height: 18px; }
.hm-mock-xbar span { display: flex; align-items: center; gap: 4px; font-size: 11.5px; }
img.hm-mock-ava { object-fit: cover; }
/* connection state lives in the nav: a tick when it can publish, a warning when
   it can't, because silent non-publishing is this product's worst failure */
.hm-nav-ok, .hm-nav-warn { margin-left: auto; width: 18px; height: 18px;
  border: 1.5px solid var(--hm-ink); display: grid; place-items: center;
  font-size: 10px; font-weight: 900; }
.hm-nav-ok { background: var(--hm-acid); color: var(--hm-ink); }
.hm-nav-warn { background: #ffcf33; color: var(--hm-ink); }
/* onboarding connect step */
.hm-connect-list { display: grid; gap: 8px; margin: 14px 0 4px; }
.hm-connect-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--hm-ink); background: var(--hm-paper); }
.hm-connect-row form { margin: 0; }
.hm-connect-name { display: flex; align-items: center; gap: 9px; flex: 1; font-size: 13px; }
/* impersonation is never subtle — the operator must always know */
.hm-impersonate-bar { position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 8px 14px; background: #ffcf33; color: var(--hm-ink);
  border-bottom: 2px solid var(--hm-ink); font-size: 12.5px; font-weight: 700; }
.hm-impersonate-bar button { border: 1.5px solid var(--hm-ink); background: var(--hm-paper);
  font-weight: 900; font-size: 11px; padding: 4px 9px; cursor: pointer; }
.hm-impersonate-bar ~ .hm-sidebar, .hm-impersonate-bar ~ .hm-main { padding-top: 38px; }
/* operator workspace table */
.hm-ws-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hm-ws-table th { text-align: left; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--hm-muted); padding: 8px 10px;
  border-bottom: 2px solid var(--hm-ink); }
.hm-ws-table td { padding: 9px 10px; border-bottom: 1px solid var(--hm-soft);
  vertical-align: middle; }
.hm-ws-table tr:hover td { background: var(--hm-paper); }
.hm-ws-spend { font-weight: 900; font-variant-numeric: tabular-nums; }
.hm-ws-hot { color: #b3261e; }
/* collapsible side sections: panel look, one line until opened */
.hm-fold { border: 2px solid var(--hm-ink); background: var(--hm-surface); }
.hm-fold > summary { cursor: pointer; list-style: none; padding: 12px 16px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 17px; text-transform: uppercase; letter-spacing: -0.3px; }
.hm-fold > summary::after { content: "+"; float: right; font-family: Inter, sans-serif;
  font-weight: 900; }
.hm-fold[open] > summary::after { content: "–"; }
.hm-fold[open] > summary { border-bottom: 1px solid var(--hm-soft); }
/* the posting-to checklist inside the decision card */
.hm-dest-row { display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid var(--hm-soft); font-size: 12.5px; font-weight: 600; }
.hm-dest-row:last-child { border-bottom: 0; }
.hm-dest-row input { width: 16px; height: 16px; accent-color: var(--hm-ink); }
.hm-dest-row .hm-dest-off { color: var(--hm-muted); text-decoration: line-through; }
.hm-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.hm-suggest button { border: 1px solid var(--hm-ink); background: var(--hm-paper);
  font-size: 11px; font-weight: 700; padding: 5px 8px; cursor: pointer; }
/* hover must never look like selected, or a tapped chip reads as chosen when it
   isn't — and on touch the hover state sticks after the finger lifts */
@media (hover: hover) {
  .hm-suggest button:hover { background: var(--hm-paper); box-shadow: 2px 2px 0 var(--hm-ink); }
}
.hm-suggest button:focus:not(:focus-visible) { outline: none; }
.hm-suggest button.hm-on { background: var(--hm-acid); box-shadow: 2px 2px 0 var(--hm-ink); }
/* the phone: one device, platform tabs switch what's on its screen */
.hm-phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hm-phone-tabs { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.hm-phone-tabs button { width: 40px; height: 40px; border: 2px solid var(--hm-ink);
  background: var(--hm-paper); display: grid; place-items: center; cursor: pointer;
  transition: transform .08s ease; }
/* hover lift only where a pointer can actually hover — on touch it stuck on */
@media (hover: hover) { .hm-phone-tabs button:hover { transform: translate(-1px, -1px); } }
/* a click must not leave the ring behind; keyboard focus still shows one */
.hm-phone-tabs button:focus:not(:focus-visible) { outline: none; }
.hm-phone-tabs button[aria-selected="true"] { background: var(--hm-acid);
  box-shadow: 3px 3px 0 var(--hm-ink); }
/* real handsets are ~9:19.5 — a wider frame reads as a tablet */
.hm-phone { width: min(286px, 82vw); background: #0b0b0b; border: 2px solid var(--hm-ink);
  border-radius: 46px; padding: 8px 7px; box-shadow: 8px 8px 0 var(--hm-ink); }
/* the wrap hugs its content, so a short feed post leaves no dead white space */
.hm-phone-screenwrap { position: relative; border-radius: 44px; overflow: hidden;
  background: #fff; }
.hm-phone-island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 18px; background: #0b0b0b; border-radius: 10px; z-index: 3;
  opacity: 0.92; }
.hm-phone-screen { max-height: min(640px, 64vh); overflow-y: auto;
  scrollbar-width: none; }
.hm-phone-screen::-webkit-scrollbar { display: none; }
/* feed posts start below the island; reels run under it like a real full-screen app */
.hm-screen-feed { padding-top: 32px; }
/* sound toggle for autoplaying reels — the only control the mock needs */
.hm-phone-sound { position: absolute; top: 36px; right: 10px; z-index: 4; width: 30px;
  height: 30px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); font-size: 13px;
  display: grid; place-items: center; }
/* Reels run full screen, but the creative is never cropped: contain keeps the
   whole 9:16 ad visible and the letterbox gives the island somewhere to sit. */
.hm-screen-reel { height: min(640px, 64vh); overflow: hidden; background: #000; }
.hm-screen-reel .hm-look-bare, .hm-screen-reel .hm-mock-reel { height: 100%; }
.hm-screen-reel .hm-look-media { width: 100%; height: 100%; aspect-ratio: auto !important;
  object-fit: contain; background: #000; }
/* overlay chrome hugs the video, not the letterbox */
.hm-screen-reel .hm-mock-scrim { padding-bottom: 8px; }
.hm-phone-under { display: flex; align-items: center; gap: 10px; width: min(286px, 82vw);
  justify-content: space-between; flex-wrap: wrap; }
.hm-look-bare { border: 0; flex: none; width: 100%; }
/* vertical formats: full-bleed with the overlay UI everyone recognizes */
.hm-mock-reel { position: relative; }
.hm-mock-reel .hm-look-media { width: 100%; }
.hm-mock-scrim { position: absolute; inset: auto 0 0 0; padding: 34px 52px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72)); color: #fff; }
.hm-mock-scrim .hm-mock-name { color: #fff; font-size: 12px; }
.hm-mock-scrim .hm-mock-cap { padding: 3px 0 0; color: #fff; font-size: 11.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-mock-scrim .hm-look-tags { color: #d7e7ff; }
.hm-mock-stack { position: absolute; right: 8px; bottom: 14px; display: grid; gap: 14px;
  justify-items: center; color: #fff; }
.hm-mock-stack svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.hm-mock-stack small { font-size: 10px; margin-top: -10px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.hm-modal { display: none; position: fixed; inset: 0; z-index: 60;
  background: rgba(35,26,30,0.55); padding: 20px; overflow-y: auto; }
/* margin:auto centers when the card fits and scrolls when it doesn't —
   place-items alone clips a too-tall card off both screen edges */
.hm-modal-card { position: relative; width: min(420px, 94vw); background: var(--hm-surface);
  border: 2px solid var(--hm-ink); box-shadow: 10px 10px 0 var(--hm-ink); margin: auto; }
/* 45vh of artwork on a 420px card filled most of a laptop screen before the
   caption even started. It is a thumbnail, not the post. */
.hm-modal-card img { width: 100%; display: block; border-bottom: 2px solid var(--hm-ink);
  max-height: min(26vh, 200px); object-fit: cover; }
.hm-modal-body { padding: 14px 16px 16px; display: grid; gap: 7px; }
.hm-modal-body h2 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 19px; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.5px; }
.hm-modal-body p { margin: 0; color: var(--hm-muted); font-size: 12.5px; line-height: 1.5; }
.hm-modal-body form { margin: 0; }
.hm-modal-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.hm-modal-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px;
  border: 1.5px solid var(--hm-ink); background: var(--hm-paper); font-weight: 900; }
.hm-button, .hm-cal-item, .hm-content-card { transition: transform .08s ease, box-shadow .08s ease; }
@media (hover: hover) {
  .hm-button:hover { transform: translate(-1px,-1px); }
  .hm-button-primary:hover { box-shadow: 5px 5px 0 var(--hm-acid); }
}
.hm-button:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--hm-blue); outline-offset: 2px; }
.hm-card { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--hm-soft); }
.hm-card:last-child { border-bottom: 0; }
/* reports */
.hm-trend { display: flex; gap: 18px; align-items: flex-end; justify-content: space-around; }
.hm-trend-col { display: grid; justify-items: center; gap: 6px; font-size: 11px; color: var(--hm-muted); }
.hm-trend-col strong { color: var(--hm-ink); font-variant-numeric: tabular-nums; }
.hm-trend-bar { width: 34px; background: var(--hm-acid); border: 1.5px solid var(--hm-ink); }
.hm-pill-num { font-family: Impact, sans-serif; font-size: 22px; letter-spacing: 0; }
.hm-report-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.hm-report-stat strong { display: block; font-family: Impact, sans-serif; font-size: 26px; }
.hm-report-stat span { font-size: 10px; font-weight: 900; text-transform: uppercase; color: var(--hm-muted); }
/* voice recorder */
.hm-voice-script { border: 2px solid var(--hm-ink); background: #fffdf4; padding: 14px 16px;
  font-size: 14px; line-height: 1.65; box-shadow: 4px 4px 0 var(--hm-soft); font-style: italic; }
.hm-rec-controls { display: flex; align-items: center; gap: 12px; }
.hm-rec-timer { font-family: Impact, sans-serif; font-size: 20px; font-variant-numeric: tabular-nums; }
/* voice training */
.hm-voice-steps { list-style: none; display: grid; gap: 10px; }
.hm-voice-steps li { padding-left: 28px; position: relative; font-size: 13px; font-weight: 700;
  color: var(--hm-muted); }
.hm-voice-steps li::before { content: "○"; position: absolute; left: 4px; }
.hm-voice-steps li.hm-step-done { color: var(--hm-ink); }
.hm-voice-steps li.hm-step-done::before { content: "✓"; color: var(--hm-ink); }
.hm-voice-steps li.hm-step-now { color: var(--hm-ink); }
.hm-voice-steps li.hm-step-now::before { content: "●"; color: var(--hm-mauve);
  animation: hm-pulse 1.1s ease-in-out infinite; }
@keyframes hm-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .hm-voice-steps li.hm-step-now::before { animation: none; } }
.hm-voice-dots { letter-spacing: 3px; color: var(--hm-ink); }
/* destination icons + mobile calendar */
.hm-dest { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.hm-dest svg { width: var(--di, 15px); height: var(--di, 15px); flex: none; }
.hm-dest-name { font-size: 0.92em; }
.hm-cal-item { overflow: hidden; }
.hm-cal-headline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
@media (max-width: 700px) {
  .hm-dest-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hm-cal-title { font-size: 20px; }
  .hm-cal-item { font-size: 9px; padding: 3px; box-shadow: none; border-width: 1px; }
  .hm-cal-item small { font-size: 7px; letter-spacing: 0; display: flex;
    align-items: center; gap: 2px; }
  .hm-cal-item small .hm-dest svg { width: 9px; height: 9px; }
  .hm-cal-headline { -webkit-line-clamp: 1; }
  .hm-cal-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hm-cal-day { min-height: 72px; padding: 4px 2px 5px; gap: 4px; }
  .hm-cal-date { font-size: 10px; }
  .hm-cal-dow { padding: 6px 4px; font-size: 8.5px; }
  .hm-page-head h1 { font-size: 30px; letter-spacing: -1px; }
  .hm-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.hm-swatch { display: inline-block; width: 16px; height: 16px; border: 1.5px solid var(--hm-ink);
  vertical-align: -3px; margin-right: 4px; }
/* channel picker tiles (post detail schedule) */
.hm-dest-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-dest-tile { display: grid; place-items: center; width: 64px; height: 64px;
  color: #fff; border: 2px solid var(--hm-ink); cursor: pointer; opacity: 0.45;
  filter: saturate(0.4); transition: opacity .1s ease, filter .1s ease, transform .1s ease;
  box-shadow: 3px 3px 0 var(--hm-soft); }
.hm-dest-tile input { position: absolute; opacity: 0; pointer-events: none; }
.hm-dest-tile .hm-dest-name { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); }
.hm-dest-tile:hover { opacity: 0.8; filter: saturate(0.8); }
.hm-dest-tile:has(input:checked) { opacity: 1; filter: none; transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--hm-ink); outline: 3px solid var(--hm-acid);
  outline-offset: 2px; }
/* topbar actions */
.hm-topbar-actions { display: flex; align-items: center; gap: 10px; }
/* 9:16 video cards in the library */
/* video tiles match image tiles — a uniform grid beats a full-height preview;
   the post page carries the true 9:16 view */
.hm-video-card .hm-content-preview video { object-position: center 30%; }
/* Tiles crop to keep the grid even, but fullscreen must show the real thing:
   without this the 9:16 clip fills a giant square and cuts off its own edges. */
video:fullscreen, video:-webkit-full-screen {
  object-fit: contain; width: 100%; height: 100%; background: #000;
  /* grid tiles absolutely position their video; fullscreen must not inherit that */
  position: static; inset: auto; max-height: none; aspect-ratio: auto; }
video::backdrop { background: #000; }
/* library: compact photo + video grids */
.hm-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; padding: 18px; }
.hm-photo { position: relative; margin: 0; border: 2px solid var(--hm-ink);
  background: var(--hm-paper); }
.hm-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.hm-photo figcaption { font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--hm-muted); padding: 6px 8px; }
.hm-photo-remove { position: absolute; top: 6px; right: 6px; opacity: 0.92; z-index: 5; }
.hm-photo:hover .hm-photo-remove, .hm-photo:focus-within .hm-photo-remove { opacity: 1; }
.hm-photo-remove button { width: 26px; height: 26px; border: 1.5px solid var(--hm-ink);
  background: var(--hm-paper); font-weight: 900; cursor: pointer; line-height: 1; }
.hm-photo-remove button:hover { background: #ffd9d9; }
.hm-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; padding: 18px; }
.hm-video-thumb { margin: 0; border: 2px solid var(--hm-ink); background: var(--hm-ink); }
.hm-video-thumb video { display: block; width: 100%; aspect-ratio: 9 / 16;
  object-fit: cover; background: #101010; }
.hm-video-thumb figcaption { font-size: 10px; font-weight: 800; text-transform: uppercase;
  color: var(--hm-paper); padding: 5px 8px; letter-spacing: 0.05em; }
.hm-video-making { display: grid; place-items: center; aspect-ratio: 9 / 16;
  color: var(--hm-paper); font-size: 28px; }
.hm-media-video { background: var(--hm-ink); position: relative; }
.hm-media-video video { display: block; width: 100%; aspect-ratio: 9 / 16;
  object-fit: cover; background: #101010; }
.hm-media-video figcaption { color: var(--hm-paper); }
.hm-status-success { border: 2px solid var(--hm-ink); background: #e7f6dc;
  padding: 12px 16px; font-weight: 700; margin-bottom: 16px; }
.hm-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em; font-weight: 700; letter-spacing: 0.08em; padding: 2px 8px;
  border: 1.5px dashed var(--hm-ink); background: var(--hm-acid); }
/* lightbox + media labels */
.hm-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(12,12,12,0.92);
  display: grid; place-items: center; cursor: zoom-out; }
.hm-lightbox[hidden] { display: none; }
.hm-lightbox img { max-width: 94vw; max-height: 92vh; border: 3px solid var(--hm-paper); }
.hm-lightbox-close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px;
  border: 2px solid var(--hm-paper); background: var(--hm-ink); color: var(--hm-paper);
  font-weight: 900; font-size: 16px; cursor: pointer; }
.hm-expand { position: absolute; top: 6px; left: 6px; z-index: 5; font-size: 10px;
  padding: 4px 8px; opacity: 0.92; }
.hm-vlightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,8,8,0.94);
  display: grid; place-items: center; padding: 24px; }
.hm-vlightbox[hidden] { display: none; }
.hm-vlightbox video { max-width: min(94vw, 480px); max-height: 90vh;
  aspect-ratio: 9/16; background: #000; }
.hm-review-figure { margin: 0 0 14px; }
/* photo picker in the video form */
.hm-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.hm-pick { position: relative; cursor: pointer; display: block; }
.hm-pick input { position: absolute; top: 4px; left: 4px; z-index: 2; width: 18px;
  height: 18px; accent-color: var(--hm-acid); }
.hm-pick img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 2px solid var(--hm-ink); opacity: 0.75; }
.hm-pick:has(input:checked) img { opacity: 1; outline: 3px solid var(--hm-acid); }
.hm-media-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em;
  border: 1.5px solid var(--hm-ink); background: var(--hm-paper); padding: 4px 10px; }
@media (max-width: 700px) { .hm-photo-grid { grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px; padding: 12px; } }
/* plan cards */
.hm-plan-grid { display: grid; gap: 12px; }
.hm-plan-card { border: 2px solid var(--hm-ink); background: var(--hm-paper); padding: 14px 16px; }
.hm-plan-current { outline: 3px solid var(--hm-acid); outline-offset: 2px; }
.hm-plan-head { display: flex; justify-content: space-between; align-items: center;
  text-transform: uppercase; letter-spacing: 0.05em; }
.hm-plan-price { font-family: Impact, "Arial Narrow Bold", sans-serif; font-size: 34px; }
.hm-plan-price span { font-size: 14px; color: var(--hm-muted); font-family: inherit; }
/* the cadence headline, same catalog line the signup cards and the marketing
   site show, so the three places never disagree */
.hm-plan-cadence { display: inline-block; margin: 2px 0 8px; padding: 3px 8px;
  background: var(--hm-acid); border: 2px solid var(--hm-ink);
  font-size: 11.5px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .3px; }
.hm-plan-list { margin: 8px 0 0 18px; font-size: 12.5px; line-height: 1.7; }
/* provider key rows (portal admin) */
.hm-key-row { border-top: 1px solid var(--hm-soft); padding: 14px 0; }
.hm-key-row:first-child { border-top: 0; }
.hm-key-head { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px; }

/* ---- onboarding wizard ---- */
.hm-ob-wrap { max-width: 620px; margin: 0 auto; padding: 40px 20px 60px; }
.hm-ob-brandbar { text-align: center; margin-bottom: 28px; }
.hm-ob-brandbar img { height: 30px; }
.hm-ob-progress { display: flex; justify-content: center; gap: 6px; margin-bottom: 26px;
  flex-wrap: wrap; }
.hm-ob-step { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 20px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.hm-ob-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; border: 1.5px solid currentColor; }
.hm-ob-todo { color: #b9afb4; }
.hm-ob-now { color: var(--hm-ink); background: var(--hm-acid); }
.hm-ob-done { color: #2e7d32; }
.hm-ob-done .hm-ob-dot { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.hm-ob-label { }
@media (max-width: 560px) { .hm-ob-label { display: none; } }
.hm-ob-card { background: var(--hm-surface); border: 2px solid var(--hm-ink);
  box-shadow: 8px 8px 0 rgba(17,17,17,0.9); border-radius: 14px; padding: 34px 30px; }
.hm-ob-h1 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 30px; line-height: 1.05; text-transform: uppercase; margin: 0 0 8px; }
.hm-ob-sub { color: var(--hm-muted); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.hm-ob-field { display: block; margin-bottom: 15px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--hm-ink); }
.hm-ob-field input, .hm-ob-field textarea, .hm-ob-field select { display: block; width: 100%;
  margin-top: 6px; border: 1.5px solid var(--hm-ink); border-radius: 8px; padding: 11px 12px;
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; box-sizing: border-box; }
.hm-ob-color { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.hm-ob-color input[type=color] { width: 46px; height: 40px; padding: 2px; margin: 0; flex-shrink: 0; }
.hm-ob-color input:not([type=color]) { margin-top: 0; }
.hm-ob-cta { font-size: 15px; padding: 13px 26px; }
.hm-ob-row { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.hm-ob-row .hm-ob-cta { margin-left: auto; }
.hm-ob-skip { display: block; text-align: center; margin-top: 16px; color: var(--hm-muted);
  font-size: 13px; }
.hm-ob-foot { text-align: center; color: #b9afb4; font-size: 12px; margin-top: 22px; }
.hm-ob-summary { border: 1.5px solid var(--hm-line); border-radius: 10px; overflow: hidden;
  margin-bottom: 20px; }
.hm-ob-sumrow { display: flex; justify-content: space-between; padding: 12px 16px;
  border-bottom: 1px solid var(--hm-line); font-size: 14px; }
.hm-ob-sumrow:last-child { border-bottom: 0; }
.hm-ob-sumrow span { color: var(--hm-muted); }