/* =========================================================
   LeadSourcing: design system
   A technical / editorial hybrid. Not a SaaS template.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg: #0a0b0d;
  --bg-alt: #101217;
  --panel: #14161c;
  --panel-2: #191b22;
  --border: #262931;
  --border-soft: #1d2028;
  --text: #eae7df;
  --text-dim: #9a9ea8;
  --text-faint: #666b76;
  --accent: #ff5a1f;
  --accent-dim: #b8431a;
  --accent-2: #33d98f;
  --accent-3: #ffb020;
  --danger: #ff4d5e;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --maxw: 1180px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before{
  content:"";
  position: fixed; inset:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight: 600; margin: 0 0 .5em; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; color: var(--text-dim); }
.mono{ font-family: var(--mono); }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* ---------- nav ---------- */
header.site-nav{
  position: sticky; top:0; z-index: 40;
  background: rgba(10,11,13,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px;
  max-width: var(--maxw); margin: 0 auto;
}
.brand{ display:flex; flex-direction:column; gap:4px; text-decoration:none; color:inherit; }
.logo{
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--text);
  display:flex; align-items:center; gap:8px;
}
.logo .dot{ color: var(--accent); }
.logo .tick{ display:inline-block; width:7px; height:7px; background: var(--accent-2); border-radius: 1px; box-shadow: 0 0 8px var(--accent-2); }
.logo-img{ height: 32px; width: auto; display:block; }
.brand-sub{
  font-family: var(--mono); font-size: 9.5px; letter-spacing:.03em;
  color: var(--text-faint); padding-left: 2px; white-space: nowrap;
}
.foot-brand .brand-sub{ font-size: 10px; }

nav.main-links{ display:flex; gap: 18px; align-items:center; }
nav.main-links a{
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
nav.main-links a:hover, nav.main-links a.active{ color: var(--text); border-color: var(--accent); }
.nav-cta{
  font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing:.06em;
  background: var(--text); color: var(--bg) !important;
  padding: 9px 16px; border-radius: var(--radius);
  transition: background .15s;
}
.nav-cta:hover{ background: var(--accent); }
.nav-toggle{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing:.05em;
  padding: 13px 22px; border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all .15s;
  cursor:pointer;
}
.btn-primary{ background: var(--accent); border-color: var(--accent); color: #0a0b0d; font-weight:700; }
.btn-primary:hover{ background: #ff7040; }
.btn-ghost{ color: var(--text); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--text-dim); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- section scaffolding ---------- */
section{ position:relative; z-index:1; padding: 88px 0; border-bottom: 1px solid var(--border-soft); }
section.tight{ padding: 56px 0; }
.eyebrow{
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); margin-bottom: 14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width: 22px; height:1px; background: var(--accent); display:inline-block; }
h1{ font-size: clamp(34px, 5vw, 58px); line-height: 1.06; color: #fff; }
h2{ font-size: clamp(26px, 3.4vw, 38px); color: #fff; }
h3{ font-size: 20px; color: #fff; }
.lede{ font-size: 19px; color: var(--text-dim); max-width: 640px; }
.section-head{ max-width: 720px; margin-bottom: 48px; }

/* ---------- grid helpers ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-7{ display:grid; grid-template-columns: repeat(7,1fr); gap: 10px; }
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-7{ grid-template-columns: repeat(2,1fr); }
}

/* ---------- panel / terminal card ---------- */
.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em;
}
.panel-head .dots{ display:flex; gap:6px; }
.panel-head .dots span{ width:7px; height:7px; border-radius:50%; background: var(--border); }
.panel-body{ padding: 20px; }
.sample-tag{
  font-family: var(--mono); font-size: 10px; text-transform:uppercase; letter-spacing:.08em;
  color: var(--text-faint); border:1px dashed var(--border); padding: 2px 7px; border-radius: 2px;
}

/* badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing:.05em;
  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border);
}
.badge-ok{ color: var(--accent-2); border-color: rgba(51,217,143,.35); background: rgba(51,217,143,.08); }
.badge-warn{ color: var(--accent-3); border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.08); }
.badge-bad{ color: var(--danger); border-color: rgba(255,77,94,.35); background: rgba(255,77,94,.08); }
.badge-neutral{ color: var(--text-dim); }

/* ---------- pipeline / stage rail ---------- */
.stage-rail{ display:flex; flex-wrap:wrap; gap: 8px; margin: 28px 0; }
.stage-chip{
  font-family: var(--mono); font-size: 12px; letter-spacing:.03em;
  border: 1px solid var(--border); padding: 8px 14px; border-radius: 20px;
  color: var(--text-dim); display:flex; align-items:center; gap:8px;
}
.stage-chip .n{ color: var(--accent); font-weight:700; }
.stage-chip.is-current{ color: var(--text); border-color: var(--accent); }

.stat-row{ display:flex; flex-wrap:wrap; gap: 34px; margin: 26px 0; }
.stat{ font-family:var(--mono); }
.stat .num{ font-size: 30px; color:#fff; font-weight:700; display:block; }
.stat .lbl{ font-size: 11.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }

/* feature list */
ul.feat{ list-style:none; margin:0 0 1em; padding:0; }
ul.feat li{
  padding: 10px 0 10px 26px; border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim); position: relative; font-size: 15px;
}
ul.feat li:last-child{ border-bottom:none; }
ul.feat li::before{
  content:"→"; position:absolute; left:0; color: var(--accent); font-family: var(--mono);
}
ul.feat li strong{ color: var(--text); }

/* why-own-it callout */
.callout{
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, rgba(255,90,31,.08), transparent);
  padding: 18px 22px; margin: 26px 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.callout .k{ font-family: var(--mono); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; color: var(--accent); margin-bottom:6px; display:block; }

/* cards for services hub */
.card-link{
  display:block; background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px; transition: border-color .15s, transform .15s;
}
.card-link:hover{ border-color: var(--accent); transform: translateY(-2px); }
.card-link .idx{ font-family: var(--mono); color: var(--accent); font-size: 12px; }
.card-link h3{ margin: 10px 0 8px; }
.card-link p{ font-size: 14px; margin:0; }
.card-link .read-arrow{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color: var(--accent-2);
}
.card-link .read-arrow span{ transition: transform .15s; }
.card-link:hover .read-arrow span{ transform: translateX(3px); }

/* tool-preference checkboxes (Request API Access form) */
.tool-check-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tool-check{
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--border); border-radius:20px; padding:7px 13px;
  font-size:12.5px; color: var(--text-dim); cursor:pointer;
  transition: border-color .15s, color .15s;
}
.tool-check:hover{ border-color: var(--text-dim); color: var(--text); }
.tool-check input{ accent-color: var(--accent); margin:0; }
.tool-check:has(input:checked){ border-color: var(--accent); color: var(--text); background: rgba(255,90,31,.08); }

/* table (chain) */
table.chain{ width:100%; border-collapse: collapse; font-size: 14px; }
table.chain th, table.chain td{ text-align:left; padding: 13px 14px; border-bottom: 1px solid var(--border); }
table.chain th{ font-family: var(--mono); text-transform: uppercase; font-size: 11px; letter-spacing:.06em; color: var(--text-faint); }
table.chain td{ color: var(--text-dim); }
table.chain td strong{ color: var(--text); }
.table-wrap{ overflow-x:auto; }

/* sequence activity visual (lead-generation.html, "Proof, not promises") */
.seq-panel{ height:100%; }
.seq-row{ padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.seq-row:last-child{ border-bottom:none; padding-bottom:0; }
.seq-row-top{ display:flex; justify-content:space-between; align-items:baseline; color:var(--text-dim); margin-bottom:12px; }
.seq-name{ color:var(--text); font-weight:600; }
.seq-meta{ font-size:11px; color:var(--text-faint); }
.seq-timeline{ position:relative; height:14px; margin-bottom:12px; overflow:hidden; }
.seq-track{ position:absolute; top:50%; left:0; right:0; height:1px; background: var(--border); transform:translateY(-50%); }
.seq-timeline-pending .seq-track{
  background-image: repeating-linear-gradient(90deg, var(--border) 0 4px, transparent 4px 9px);
  background-color: transparent; height:1px;
}
.seq-timeline::after{
  content:""; position:absolute; top:0; bottom:0; left:-60px; width:60px;
  background: linear-gradient(90deg, transparent, rgba(255,90,31,.14), transparent);
  animation: seq-scan 4.5s linear infinite;
}
.seq-timeline-pending::after{ display:none; }
@keyframes seq-scan{ 0%{ left:-60px; } 100%{ left:100%; } }
.seq-dot{
  position:absolute; top:50%; width:7px; height:7px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0); opacity:0;
  animation: seq-pop .5s cubic-bezier(.2,.8,.3,1.2) forwards;
  animation-iteration-count: 1;
}
.seq-dot.proxy{ background: var(--accent-3); box-shadow:0 0 0 4px rgba(255,176,32,.14); }
.seq-dot.genuine{ background: var(--accent-2); box-shadow:0 0 0 4px rgba(51,217,143,.14); }
@keyframes seq-pop{ to{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
.seq-row-bottom{ display:flex; gap:8px; flex-wrap:wrap; }
.seq-legend{
  display:flex; flex-direction:column; gap:8px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--border); font-size:11.5px; color:var(--text-faint);
}
.seq-dot-legend{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.seq-dot-legend.proxy{ background:var(--accent-3); box-shadow:0 0 0 3px rgba(255,176,32,.14); }
.seq-dot-legend.genuine{ background:var(--accent-2); box-shadow:0 0 0 3px rgba(51,217,143,.14); }
@media (prefers-reduced-motion: reduce){
  .seq-dot{ animation: none; opacity:1; transform:translate(-50%,-50%) scale(1); }
  .seq-timeline::after{ animation:none; display:none; }
}

/* testimonials */
.quote{ border-top: 1px solid var(--border); padding-top: 20px; }
.quote p{ font-family: var(--serif); font-size: 19px; color: var(--text); font-style: italic; }
.quote .who{ font-family: var(--mono); font-size: 12px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }

/* footer: kept deliberately dim, this is the least-visited part of the
   page, it shouldn't out-compete the CTA section sitting right above it.
   Extra top margin/padding keeps real air between the CTA and this border,
   instead of the two visually touching. */
footer{ margin-top: 30px; padding: 90px 0 30px; border-top: 1px solid rgba(255,90,31,.10); }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 36px; }
.foot-grid h4{ font-family: var(--mono); font-size: 11px; text-transform:uppercase; letter-spacing:.06em; color: var(--accent-dim); margin-bottom: 14px; }
.foot-grid a, .foot-grid p{ font-size: 13px; color: var(--text-faint); display:block; margin-bottom: 9px; overflow-wrap: break-word; }
.foot-grid a:hover{ color: var(--text-dim); }
.foot-grid a[href^="tel:"], .foot-grid a[href^="mailto:"]{ color: #2a8f63; }
.foot-grid a[href^="tel:"]:hover, .foot-grid a[href^="mailto:"]:hover{ color: var(--accent-2); }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--border-soft); padding-top: 20px; font-family: var(--mono); font-size: 11px; color: var(--text-faint); opacity: .75; }
.foot-privacy{ margin-left: 10px; color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
.foot-privacy:hover{ color: var(--text-dim); }
@media (max-width: 900px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){
  /* At true phone widths two columns of mono address/email text ran past
     the viewport edge (real overflow, not just visually tight). Stack. */
  .foot-grid{ grid-template-columns: 1fr; gap: 30px; margin-bottom: 32px; }
}

/* hero specific */
.hero{ padding-top: 110px; padding-bottom: 90px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } }

/* blog */
.post-list{ display:flex; flex-direction:column; }
.post-row{ display:grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--border); }
.post-row .date{ font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.post-row h3{ margin-bottom: 8px; }
.tag-row{ display:flex; gap:8px; margin-top:10px; }
.tag{ font-family: var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint); border:1px solid var(--border); padding:2px 8px; border-radius:10px; }

article.post{ max-width: 720px; margin: 0 auto; }
article.post h2{ margin-top: 1.4em; }
article.post h3{ margin-top: 1.2em; }
article.post p{ color: var(--text-dim); font-size: 16.5px; }
article.post ul, article.post ol{ color: var(--text-dim); font-size: 16.5px; padding-left: 22px; }
article.post li{ margin-bottom: 8px; }
article.post code{ font-family: var(--mono); background: var(--panel); padding: 2px 6px; border-radius: 3px; font-size: .9em; color: var(--accent-3); }

/* mobile nav: breakpoint raised from the original 860px to 1180px because
   the nav grew from 5 items to 7 (Tools / Lead Gen / Fix My Inbox added),
   and 7 items plus the brand and CTA genuinely don't fit below ~1180px,
   they wrapped and overlapped the logo at 900px before this was fixed. */
.nav-cta-mobile{ display:none; }
@media (max-width: 1180px){
  nav.main-links{ display:none; }
  .nav-toggle{ display:block; background:none; border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:3px; font-family: var(--mono); }
  /* The pill CTA and the wordmark subtitle are what were crowding into the
     toggle button on real phone widths (CTA text wrapping into 3 lines,
     subtitle overflowing underneath it). Drop both from the bar itself;
     the CTA re-appears as a full-width button inside the opened menu. */
  .nav-cta{ display:none; }
  .site-nav .brand-sub{ display:none; }
  nav.main-links.open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background: var(--bg-alt); border-bottom:1px solid var(--border); padding: 18px 28px; gap:16px; z-index:60;
  }
  nav.main-links.open .nav-cta-mobile{
    display:block; text-align:center; margin-top:4px;
    background: var(--accent); color:#0a0b0d !important; font-weight:700;
    font-family: var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
    padding:12px; border-radius: var(--radius);
  }
}

.section-alt{ background: var(--bg-alt); }
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.small{ font-size: 13px; }

/* ---------- animated product dashboard mock ----------
   Illustrative recreation of a tool's real UI, used instead of an actual
   screenshot when the real screenshot would expose live client data. Numbers
   and names below are placeholders, never real accounts or campaigns. */
.dash-mock{
  --mh-accent:#ec1f63; --mh-bg:#f7f7f9; --mh-card:#ffffff; --mh-border:#e7e7ec;
  --mh-text:#1c1c22; --mh-dim:#787885; --mh-green-bg:#dcf7e3; --mh-green-text:#189049;
  --mh-pink-bg:#fde3ee; --mh-pink-text:#c23a72;
  background: var(--mh-bg); color: var(--mh-text); font-family: var(--sans);
  display:flex; min-height: 380px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.dash-mock.in-view{ opacity:1; transform:none; }

.dash-mock .dm-side{
  width: 168px; flex: none; background:#fff; border-right:1px solid var(--mh-border);
  padding: 18px 14px; display:flex; flex-direction:column; gap:18px;
}
.dash-mock .dm-brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; padding: 0 4px; }
.dash-mock .dm-brand .dm-icon{
  width:22px; height:22px; border-radius:7px; flex:none;
  background: linear-gradient(135deg,#ff5a1f,#ec1f63 55%,#7c5cff);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px;
}
.dash-mock .dm-nav-group{ display:flex; flex-direction:column; gap:2px; }
.dash-mock .dm-nav-label{
  font-family: var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em;
  color:#b3b3bd; margin: 8px 4px 2px;
}
.dash-mock .dm-nav-item{
  font-size:12.5px; color:#55555f; padding:7px 8px; border-radius:6px; display:flex; align-items:center; gap:8px;
}
.dash-mock .dm-nav-item.active{ background:#fdeaf1; color: var(--mh-accent); font-weight:600; }
.dash-mock .dm-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55; flex:none; }

.dash-mock .dm-main{ flex:1; min-width:0; padding: 20px 22px 8px; overflow:hidden; }
.dash-mock .dm-topline{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dash-mock .dm-title{ display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; }
.dash-mock .dm-live{
  font-family: var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em;
  color:#189049; display:flex; align-items:center; gap:5px;
}
.dash-mock .dm-live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#22c55e;
  animation: dm-pulse 1.6s ease-in-out infinite;
}
.dash-mock .dm-new-btn{
  font-family: var(--sans); font-weight:600; font-size:12px; color:#fff; background: var(--mh-accent);
  padding:7px 13px; border-radius:7px; white-space:nowrap;
}
.dash-mock .dm-folders{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.dash-mock .dm-folder{
  font-size:11.5px; color:#55555f; background:#fff; border:1px solid var(--mh-border);
  padding:5px 12px; border-radius:20px;
}
.dash-mock .dm-folder.active{ background:#1c1c22; color:#fff; border-color:#1c1c22; }

.dash-mock .dm-table{ background:#fff; border:1px solid var(--mh-border); border-radius:10px; overflow:hidden; }
.dash-mock .dm-row{
  display:grid; grid-template-columns: 1.8fr .8fr 1fr 1.1fr .8fr .8fr;
  gap:10px; align-items:center; padding:9px 14px; font-size:11.5px;
  border-bottom:1px solid var(--mh-border);
  opacity:0; transform: translateX(-8px);
}
.dash-mock.in-view .dm-row{ animation: dm-row-in .5s ease forwards; }
.dash-mock .dm-row:last-child{ border-bottom:none; }
.dash-mock .dm-row.dm-head{
  font-family: var(--mono); text-transform:uppercase; letter-spacing:.05em; font-size:9.5px;
  color:#a3a3ad; background:#fafafc; opacity:1; transform:none; animation:none;
}
.dash-mock .dm-row.dm-head{ animation:none; }
.dash-mock .dm-campaign{ font-weight:600; color:var(--mh-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-mock .dm-status{
  font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; display:inline-block; width:fit-content;
}
.dash-mock .dm-status.active{ background: var(--mh-green-bg); color: var(--mh-green-text); }
.dash-mock .dm-status.completed{ background: var(--mh-pink-bg); color: var(--mh-pink-text); }
.dash-mock .dm-opens{ color:var(--mh-dim); }
.dash-mock .dm-opens b{ color:var(--mh-text); }
.dash-mock .dm-bar{ height:4px; border-radius:2px; background:#eef0f3; margin-top:4px; overflow:hidden; }
.dash-mock .dm-bar span{ display:block; height:100%; background: var(--mh-accent); width:0; transition: width 1.1s ease; }
.dash-mock.in-view .dm-bar span{ width: var(--pct); }
.dash-mock .dm-dim{ color:var(--mh-dim); }

.dash-mock .dm-row:nth-child(2){ animation-delay:.05s; }
.dash-mock .dm-row:nth-child(3){ animation-delay:.12s; }
.dash-mock .dm-row:nth-child(4){ animation-delay:.19s; }
.dash-mock .dm-row:nth-child(5){ animation-delay:.26s; }
.dash-mock .dm-row:nth-child(6){ animation-delay:.33s; }
.dash-mock .dm-row:nth-child(7){ animation-delay:.40s; }
.dash-mock .dm-row:nth-child(8){ animation-delay:.47s; }
.dash-mock .dm-row:nth-child(9){ animation-delay:.54s; }

@keyframes dm-row-in{ to{ opacity:1; transform:none; } }
@keyframes dm-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

@media (prefers-reduced-motion: reduce){
  .dash-mock, .dash-mock .dm-row, .dash-mock .dm-bar span{ transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; }
  .dash-mock .dm-bar span{ width: var(--pct) !important; }
}

.dm-mobile-line{ display:none; }

@media (max-width: 760px){
  .dash-mock{ flex-direction:column; min-height:0; }
  .dash-mock .dm-side{ display:none; }
  .dash-mock .dm-row.dm-head{ display:none; }
  .dash-mock .dm-row{
    display:block; grid-template-columns:none; padding:12px 14px;
  }
  .dash-mock .dm-row > div{ display:none; }
  .dash-mock .dm-row > .dm-mobile-line{ display:block; }
  .dm-mobile-line .dm-ml-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .dm-mobile-line .dm-ml-name{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-mobile-line .dm-ml-meta{ font-size:11.5px; color:var(--mh-dim); line-height:1.6; }
}

/* ---------- Google Calendar booking embed ---------- */
@media (max-width: 640px){
  .panel iframe{ height: 560px !important; }
}