/**
 * Hameldon Child: HighLevel page (/highlevel/) only.
 *
 * Enqueued by ht_highlevel_assets() in functions.php, on this page only.
 * New components only. Everything else (.ht-page-head, .ht-head-split,
 * .ht-fig, .ht-split, .ht-lab, .ht-callout, .ht-faq, .ht-band, .ht-btn)
 * comes from style.css and is reused as-is.
 *
 * Rule from the build: Divi styles lists inside Code modules, so every
 * list here sets list-style explicitly with !important.
 */

/* ---------- shared ---------- */
.ht-hl-card{
  background:#FFF;background:var(--ht-surface,#FFF);
  border:1px solid #E7E1D7;border:1px solid var(--ht-line,#E7E1D7);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(22,19,15,.04),0 4px 12px rgba(22,19,15,.05);
}
.ht-hl-mono{
  font-family:var(--ht-mono,"JetBrains Mono",monospace);
  font-variant-numeric:tabular-nums;
}
.ht-hl-head{max-width:42rem;margin-bottom:clamp(1.75rem,3vw,2.25rem)}
.ht-hl-head h2{margin-top:.75rem}
.ht-hl-head .ht-note{margin-top:.75rem}

/* ---------- head figure output rows ---------- */
.ht-hl-out{display:grid;gap:.6rem}
.ht-hl-out .ht-out-row{display:flex;align-items:center;gap:.6rem}
.ht-hl-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#3F8F5F;
}
@media (prefers-reduced-motion:no-preference){
  .ht-hl-live i{animation:ht-hl-pulse 2.4s ease-in-out infinite}
}
@keyframes ht-hl-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(63,143,95,.45)}
  50%{box-shadow:0 0 0 5px rgba(63,143,95,0)}
}

/* ---------- in practice: five steps ---------- */
.ht-hl-steps-wrap{position:relative}
.ht-hl-steps{
  position:relative;z-index:1;
  list-style:none !important;margin:0 !important;padding:0 !important;
  display:grid;gap:1rem;
}
.ht-hl-steps > li{
  list-style:none !important;margin:0;
  position:relative;z-index:1;
  padding:1.35rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.ht-hl-steps .ht-hl-n{
  font-family:var(--ht-serif,"Source Serif 4",Georgia,serif);
  font-size:2rem;line-height:1;
  color:#C6673B;color:var(--ht-copper,#C6673B);
}
.ht-hl-steps-line{display:none}
@media (min-width:900px){
  .ht-hl-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* Copper line behind the step numbers. Fully drawn without JS;
     ht-highlevel.js scrubs it in from the left when motion is allowed. */
  .ht-hl-steps-line{
    display:block;position:absolute;z-index:0;
    left:2%;right:2%;top:2.35rem;height:2px;
    background:#C6673B;background:var(--ht-copper,#C6673B);
    opacity:.35;transform-origin:left center;
  }
}
.ht-hl-after{margin-top:1.75rem;font-size:1.0625rem;color:#16130F;color:var(--ht-ink,#16130F)}

/* ---------- more than a CRM: feature rows with separate-tool cost ---------- */
.ht-hl-sum{margin-top:1.5rem}
.ht-hl-sum .ht-hl-results{margin-top:1.1rem}
.ht-hl-tool-group{margin:2rem 0 .75rem}
.ht-hl-tool-group:first-child{margin-top:0}
.ht-hl-tools{
  list-style:none !important;margin:0 !important;padding:0 !important;
  display:grid;gap:.75rem;
}
.ht-hl-tool{
  list-style:none !important;margin:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:1rem;row-gap:.5rem;align-items:start;
  padding:1.15rem 1.25rem;border-radius:12px;
  background:#FFF;border:1px solid #E7E1D7;
  box-shadow:0 1px 2px rgba(22,19,15,.04),0 4px 12px rgba(22,19,15,.05);
  transition:background-color .2s ease,border-color .2s ease;
}
.ht-hl-tool > *{margin:0;padding:0}
.ht-hl-tool-head{
  grid-column:1;display:flex;align-items:center;gap:.65rem;
  min-height:44px;cursor:pointer;
}
.ht-hl-tool-head input{
  width:20px;height:20px;flex:none;margin:0;cursor:pointer;
  accent-color:#C6673B;accent-color:var(--ht-copper,#C6673B);
}
.ht-hl-tool-head input:focus-visible{outline:3px solid #C6673B;outline-offset:3px}
.et_pb_code_inner .ht-hl-tool-name{
  font-family:var(--ht-serif,"Source Serif 4",Georgia,serif);
  font-weight:500;font-size:1.125rem;line-height:1.3;color:#16130F;
}
.ht-hl-tool-cost{grid-column:2;grid-row:1;text-align:right;align-self:center}
.et_pb_code_inner .ht-hl-tool-cost b{
  display:block;font-weight:500;font-size:1.25rem;color:#16130F;
  font-family:var(--ht-mono,"JetBrains Mono",monospace);font-variant-numeric:tabular-nums;
}
.et_pb_code_inner .ht-hl-tool-cost small{display:block;font-size:.75rem;color:#4E4740}
.ht-hl-tool-what,.ht-hl-tool-eg{grid-column:1 / -1}
.et_pb_code_inner .ht-hl-tool-what{color:#4E4740}
.et_pb_code_inner .ht-hl-tool-eg{
  padding:.7rem .9rem;border-radius:8px;background:#F2EFE9;color:#16130F;font-size:.9375rem;
}
.ht-hl-tool-eg > span,
.ht-hl-tool-alt > span:first-child,
.ht-hl-tool-in > span{
  display:block;margin-bottom:.15rem;
  font-family:var(--ht-mono,"JetBrains Mono",monospace);
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.et_pb_code_inner .ht-hl-tool-eg > span,
.et_pb_code_inner .ht-hl-tool-alt > span:first-child,
.et_pb_code_inner .ht-hl-tool-in > span{color:#4E4740}
.ht-hl-tool-alt{grid-column:1}
.ht-hl-tool-in{grid-column:2;text-align:right}
.et_pb_code_inner .ht-hl-tool-alt,
.et_pb_code_inner .ht-hl-tool-in{font-size:.875rem;color:#16130F}
.et_pb_code_inner .ht-hl-tool-alt small{color:#4E4740;font-size:.8125rem}
.et_pb_code_inner .ht-hl-tool-alt small::before{content:" \00b7  "}
/* Unticked: quieter, but every line still passes 4.5:1 */
.ht-hl-tool.is-off{background:#FBFAF7;box-shadow:none;border-style:dashed}
.et_pb_code_inner .ht-hl-tool.is-off .ht-hl-tool-cost b{color:#4E4740;text-decoration:line-through;text-decoration-thickness:1px}
.et_pb_code_inner .ht-hl-tool.is-off .ht-hl-tool-eg{background:#F5F2EC}


/* Phone width: the summary card scrolls away above 19 rows, so a small
   sticky bar keeps the running totals in view while ticking. */
.ht-hl-sumbar{display:none}
@media (max-width:899px){
  .et_pb_code_inner .ht-hl-sumbar{
    position:sticky;bottom:.75rem;z-index:5;
    display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
    margin:1rem 0 0;padding:.75rem 1rem;border-radius:12px;
    background:#16130F;color:#CFC7BA;font-size:.875rem;
    box-shadow:0 8px 24px rgba(22,19,15,.18);
  }
  .et_pb_code_inner .ht-hl-sumbar b{color:#FFF;font-weight:500;font-family:var(--ht-mono,"JetBrains Mono",monospace)}
}

/* ---------- business examples: use-case cards ---------- */
.ht-hl-uc{display:grid;gap:1rem;align-items:start}
@media (min-width:900px){.ht-hl-uc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ht-hl-uc details{overflow:hidden}
.ht-hl-uc summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1.35rem 1.5rem;min-height:44px;
}
.ht-hl-uc summary::-webkit-details-marker{display:none}
.ht-hl-uc summary strong{
  display:block;
  font-family:var(--ht-serif,"Source Serif 4",Georgia,serif);
  font-weight:500;font-size:1.1875rem;
  color:#16130F;color:var(--ht-ink,#16130F);
}
.ht-hl-uc summary span span{display:block;margin-top:.2rem}
.ht-hl-uc .ht-hl-x{
  flex:none;font-size:1.4rem;line-height:1;
  color:#C6673B;color:var(--ht-copper,#C6673B);
  transition:transform .2s ease;
}
.ht-hl-uc details[open] .ht-hl-x{transform:rotate(45deg)}
.ht-hl-uc summary:focus-visible{outline:3px solid #C6673B;outline-offset:-3px;border-radius:12px}
.ht-hl-uc ol{
  list-style:decimal !important;
  margin:0 !important;padding:0 1.5rem 1rem 2.75rem !important;
  display:grid;gap:.4rem;
}
.ht-hl-uc ol li{list-style:decimal !important;margin:0;padding:0}
.ht-hl-uc .ht-hl-aside{margin:0;padding:0 1.5rem 1.35rem;font-size:.875rem}
.ht-hl-uc .ht-callout{margin:0 1.5rem 1rem}

/* ---------- calculators and comparison ---------- */
.ht-hl-panel{padding:clamp(1.25rem,2.6vw,1.75rem);border-radius:18px}
.ht-hl-panel + .ht-hl-panel{margin-top:1rem}
.ht-hl-field{display:grid;gap:.25rem;margin-top:1.15rem}
.ht-hl-field:first-child{margin-top:0}
.ht-hl-field-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ht-hl-field label{font-weight:600;color:#16130F;color:var(--ht-ink,#16130F)}
.ht-hl-field small{display:block;font-size:.8125rem;font-weight:400}
/* Range sliders, styled fully by hand.
   Something upstream strips the native look, which left only the thumb.
   --hl-fill is set by ht-highlevel.js; without JS the track is plain. */
.et_pb_code_inner .ht-hl-field input[type=range]{
  -webkit-appearance:none !important;appearance:none !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  width:100%;height:28px;margin:0;padding:0;cursor:pointer;
}
.et_pb_code_inner .ht-hl-field input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(to right,#C6673B 0,#C6673B var(--hl-fill,0%),#E7E1D7 var(--hl-fill,0%),#E7E1D7 100%);
}
.et_pb_code_inner .ht-hl-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:#FFF;border:2px solid #C6673B;
  box-shadow:0 1px 2px rgba(22,19,15,.15);
}
.et_pb_code_inner .ht-hl-field input[type=range]::-moz-range-track{
  height:6px;border-radius:999px;background:#E7E1D7;border:0;
}
.et_pb_code_inner .ht-hl-field input[type=range]::-moz-range-progress{
  height:6px;border-radius:999px;background:#C6673B;
}
.et_pb_code_inner .ht-hl-field input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#FFF;border:2px solid #C6673B;
  box-shadow:0 1px 2px rgba(22,19,15,.15);
}
.et_pb_code_inner .ht-hl-field input[type=range]:focus-visible{outline:3px solid #C6673B;outline-offset:4px;border-radius:999px}
.ht-hl-money{display:inline-flex;align-items:center;gap:.35rem;color:#16130F}
.ht-hl-money input{
  width:6rem;min-height:44px;padding:0 .7rem;
  border:1px solid #E7E1D7;border-radius:8px;
  background:#FBFAF7;color:#16130F;font:inherit;
}
.ht-hl-field input:focus-visible,
.ht-hl-plans button:focus-visible{outline:3px solid #C6673B;outline-offset:3px}
.ht-hl-rule{height:1px;background:#E7E1D7;margin:1.35rem 0 0}

.ht-hl-plans{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.ht-hl-plans button{
  min-height:44px;padding:0 1.15rem;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:600;
  background:#FFF;color:#16130F;border:1px solid #E7E1D7;
}
.ht-hl-plans button[aria-pressed="true"]{background:#16130F;color:#FFF;border-color:#16130F}

.ht-hl-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1.35rem}
.ht-hl-result{padding:1.1rem;border-radius:12px;background:#F2EFE9;background:var(--ht-tint,#F2EFE9)}
.ht-hl-result b{
  display:block;font-weight:500;
  font-family:var(--ht-mono,"JetBrains Mono",monospace);
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  color:#16130F;color:var(--ht-ink,#16130F);
}
.ht-hl-result.is-dark{background:#16130F;background:var(--ht-ink,#16130F)}
.ht-hl-result.is-dark b{color:#FFF}
.ht-hl-result.is-dark span{color:#CFC7BA}
.ht-hl-result span{font-size:.875rem}
.ht-hl-good{color:#3F8F5F !important}
.ht-hl-verdict{
  margin:1rem 0 0;padding:.9rem 1rem;border-radius:8px;
  background:#F2EFE9;background:var(--ht-tint,#F2EFE9);
  font-weight:600;color:#16130F;
}
.ht-hl-small{margin:1rem 0 0;font-size:.8125rem}

.ht-hl-teamsize{display:flex;align-items:center;gap:1rem;margin-top:.4rem}
.ht-hl-teamsize output{
  min-width:2.5ch;text-align:right;font-size:1.5rem;color:#16130F;
  font-family:var(--ht-mono,"JetBrains Mono",monospace);
}

/* ---------- teams: fits list ---------- */
.ht-hl-fits{
  list-style:disc !important;margin:1rem 0 0 !important;padding:0 0 0 1.25rem !important;
  display:grid;gap:.4rem;color:#16130F;
}
.ht-hl-fits li{list-style:disc !important;margin:0;padding:0}

/* ---------- try it ---------- */
.ht-hl-try{display:grid;gap:1rem}
@media (min-width:760px){.ht-hl-try{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ht-hl-try .ht-hl-card{padding:1.75rem;border-radius:18px;display:flex;flex-direction:column;gap:.75rem}
.ht-hl-try h3{margin:0}
.ht-hl-try p{margin:0;padding:0}
.ht-hl-try .ht-btn{align-self:flex-start;margin-top:.4rem}

/* ---------- text colour, explicitly ----------
   Something upstream was painting these a pale grey that fails 4.5:1.
   This file loads on /highlevel/ only, so these can be blunt. */
.et_pb_code_inner .ht-hl-out .ht-out-row span{color:#4E4740}
.et_pb_code_inner .ht-hl-out .ht-out-row .nm{color:#16130F}
.et_pb_code_inner .ht-callout,
.et_pb_code_inner .ht-callout p,
.et_pb_code_inner .ht-callout strong{color:#16130F}
.et_pb_code_inner .ht-hl-field-top .ht-hl-mono,
.et_pb_code_inner .ht-hl-field-top .ht-hl-mono span{color:#16130F}
.et_pb_code_inner .ht-hl-field small{color:#4E4740}
.et_pb_code_inner .ht-hl-result span{color:#4E4740}
.et_pb_code_inner .ht-hl-result.is-dark span{color:#CFC7BA}
.et_pb_code_inner .ht-hl-uc summary span span,
.et_pb_code_inner .ht-hl-uc ol li,
.et_pb_code_inner .ht-hl-uc .ht-hl-aside{color:#4E4740}

/* ---------- footnotes ---------- */
.ht-hl-notes{font-size:.8125rem;max-width:72ch}
.ht-hl-notes p{margin:0;padding:0}
.ht-hl-notes p + p{margin-top:.5rem}