/* ============================================================================
   Compare pages — gohighlevel-alternative, vendasta-alternative,
   gohighlevel-pricing, vendasta-pricing.  Loaded by those four only.

   Signature (MOTION-CHARTER §3): THE RECEIPT. On the two pricing articles a
   worked example is printed as a paper receipt. As the reader scrolls past
   each line it is "rung up" and the total at the foot becomes the sum of the
   lines rung so far — derived from the printed figures, never invented, and a
   pure function of scroll. Without JS, or under reduced motion, every line is
   rung and the full total is printed. js/fx-compare.js toggles .is-rung.

   Everything else here is the long, cited-read furniture: prose measure,
   hairline comparison tables, numbered lists, an FAQ and a source list.
   ========================================================================== */

/* ------------------------------------------------------------ the paper -- */
/* Warm paper against the navy ground (house rule). Behaves like .sec--light. */
.sec--paper{ background:#f4f1ea; color:var(--text); --border:#d9d2c3; }
.sec--paper .lead, .sec--paper .copy{ color:var(--text-muted); }
.sec--paper .kicker{ color:var(--primary); background:rgba(var(--primary-rgb),.07); border-color:rgba(var(--primary-rgb),.2); }
.sec--paper .kicker::before{ background:var(--primary); }
.sec--paper .btn{ color:var(--primary); border-color:rgba(var(--primary-rgb),.4); }
.sec--paper .btn:hover{ background:rgba(var(--primary-rgb),.07); }
.sec--paper .btn--solid{ background:linear-gradient(120deg, var(--primary), var(--grad-end)); color:#fff;
  box-shadow:0 12px 30px -12px rgba(var(--primary-rgb),.6); }
.sec--paper .cp-pull{ border-top-color:var(--border); }
.sec--paper .cp-pull .n{ color:var(--primary); }
.sec--paper .cp-pull p{ color:var(--text); }

/* ---------------------------------------------------------------- hero ---- */
.cp-hero{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
.cp-hero .t-display{ font-size:clamp(2.2rem,4.3vw,3.9rem); max-width:17ch; }
.cp-hero figure{ margin:0; }
.cp-hero .tilt-plate{ border-radius:16px; overflow:hidden; }
.cp-hero .tilt-plate > img{ aspect-ratio:4/3; object-fit:cover; object-position:left top; width:100%; }
.cp-meta{ margin-top:24px; font-size:13.5px; color:#a8c4d5; letter-spacing:.01em; max-width:60ch; }

/* ---------------------------------------------------------------- prose --- */
.cp-prose{ max-width:68ch; }
.cp-prose p{ font-size:var(--t-copy); line-height:1.7; margin:0 0 18px; color:var(--text); }
.cp-prose p.lead{ font-size:var(--t-lead); }
.sec--dark .cp-prose p{ color:#d6e8f2; }
.cp-prose a:not(.btn), .cp-cite a, .cp-src a, .cp-faq a, .cp-table a, .cp-list a{ color:var(--primary); text-underline-offset:3px; }
.sec--dark .cp-prose a:not(.btn), .sec--dark .cp-cite a, .sec--dark .cp-table a, .sec--dark .cp-list a{ color:var(--accent); }
sup.cp-ref{ font-size:.7em; line-height:0; margin-left:1px; }
sup.cp-ref a{ text-decoration:none; font-weight:700; }
.cp-cite{ font-size:13.5px; color:var(--text-muted); margin-top:14px; max-width:78ch; }
.sec--dark .cp-cite{ color:#a8c4d5; }

.cp-two{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:start; }
.cp-two--flip{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.cp-two figure{ margin:0; position:sticky; top:110px; }
.cp-two .tilt-plate{ border-radius:16px; overflow:hidden; }
.cp-two .tilt-plate > img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
.cp-two .tilt-plate > img.shot{ aspect-ratio:auto; object-fit:contain; }
.cp-two > *{ min-width:0; }
figure .cp-cap{ margin-top:14px; font-size:14px; }

.cp-wide{ margin:52px 0 0; }
.cp-wide .tilt-plate{ border-radius:16px; overflow:hidden; }

/* ------------------------------------------------------- comparison table - */
.cp-scroll{ overflow-x:auto; margin-top:36px; -webkit-overflow-scrolling:touch; }
.cp-table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.cp-table caption{ text-align:left; font-size:13.5px; color:var(--text-muted); padding-bottom:14px; caption-side:bottom; padding-top:14px; }
.cp-table th, .cp-table td{ text-align:left; vertical-align:top; padding:15px 16px 15px 0; border-bottom:1px solid var(--border); }
.cp-table thead th{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); padding-top:0; border-bottom-color:rgba(var(--primary-rgb),.35); }
.cp-table thead th.us{ color:var(--primary); }
.cp-table tbody th{ font:700 15px/1.35 var(--font-display); color:var(--text); width:22%; }
.cp-table td.us{ color:var(--text); font-weight:600; }
.cp-table td{ color:var(--text-muted); }
.cp-table .num{ font:800 1.25rem/1.1 var(--font-display); color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp-table td.us .num{ color:var(--primary); }
.cp-table tr:last-child th, .cp-table tr:last-child td{ border-bottom:0; }
.cp-table--3 { min-width:720px; }
.cp-table--2 { min-width:600px; }

.sec--dark .cp-table th, .sec--dark .cp-table td{ border-bottom-color:rgba(var(--accent-rgb),.12); }
.sec--dark .cp-table thead th{ color:#a8c4d5; border-bottom-color:rgba(var(--accent-rgb),.3); }
.sec--dark .cp-table thead th.us{ color:var(--accent); }
.sec--dark .cp-table tbody th{ color:#eaf4fa; }
.sec--dark .cp-table td{ color:#a8c4d5; }
.sec--dark .cp-table td.us{ color:#eaf4fa; }
.sec--dark .cp-table .num{ color:#eaf4fa; }
.sec--dark .cp-table td.us .num{ color:var(--accent); }
.sec--dark .cp-table caption{ color:#a8c4d5; }

/* --------------------------------------------------------- numbered lists - */
.cp-list{ list-style:none; counter-reset:cp; margin:30px 0 0; padding:0; max-width:72ch; }
.cp-list > li{ counter-increment:cp; display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:0 14px;
  padding:18px 0; border-top:1px solid var(--border); }
.cp-list > li:last-child{ border-bottom:1px solid var(--border); }
.cp-list > li::before{ content:counter(cp, decimal-leading-zero); font:800 1.35rem/1.2 var(--font-display); color:var(--primary); font-variant-numeric:tabular-nums; }
.cp-list h3{ font-size:1.12rem; line-height:1.3; letter-spacing:-.01em; margin:0 0 6px; }
.cp-list p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--text-muted); }
.sec--dark .cp-list > li{ border-color:rgba(var(--accent-rgb),.16); }
.sec--dark .cp-list > li::before{ color:var(--accent); }
.sec--dark .cp-list h3{ color:#fff; }
.sec--dark .cp-list p{ color:#c4dbe7; }

/* ------------------------------------------------------------- the pull --- */
.cp-pull{ margin-top:40px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center; max-width:820px;
  padding-top:24px; border-top:1px solid rgba(var(--accent-rgb),.22); }
.cp-pull .n{ font:800 clamp(2.4rem,5vw,3.8rem)/1 var(--font-display); color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp-pull p{ margin:0; color:#d6e8f2; font-size:16px; line-height:1.55; }
.sec--light .cp-pull, .sec--tintlight .cp-pull{ border-top-color:var(--border); }
.sec--light .cp-pull .n, .sec--tintlight .cp-pull .n{ color:var(--primary); }
.sec--light .cp-pull p, .sec--tintlight .cp-pull p{ color:var(--text); }

/* ------------------------------------------------------- THE RECEIPT ----- */
.cp-receipt{
  position:relative; margin:0; padding:26px 26px 22px; background:#f4f1ea; color:#16232c;
  border-radius:4px; box-shadow:0 30px 60px -34px rgba(var(--dark-rgb),.55), 0 1px 0 rgba(0,0,0,.04);
  font-variant-numeric:tabular-nums;
}
.cp-receipt::after{          /* the torn foot */
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:10px;
  background:linear-gradient(-45deg, transparent 6px, #f4f1ea 0) 0 0/14px 10px repeat-x,
             linear-gradient(45deg, transparent 6px, #f4f1ea 0) 0 0/14px 10px repeat-x;
}
.cp-receipt h3{ font:800 1.05rem/1.25 var(--font-display); letter-spacing:.02em; text-transform:uppercase; margin:0; }
.cp-receipt .sub{ margin:6px 0 16px; font-size:13.5px; color:#5f7079; }
.cp-lines{ list-style:none; margin:0; padding:0; border-top:1px dashed #cdc6b8; }
.cp-line{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; padding:12px 0; border-bottom:1px dashed #cdc6b8; opacity:.32; }
.cp-line.is-rung{ opacity:1; }
.cp-line .what{ font-size:15px; line-height:1.4; }
.cp-line .what small{ display:block; font-size:12.5px; color:#5f7079; margin-top:2px; }
.cp-line .amt{ font:700 16px/1.4 var(--font-display); text-align:right; white-space:nowrap; }
.cp-line--opt .what, .cp-line--opt .amt{ color:#5f7079; }
.cp-total{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-top:16px; }
.cp-total span{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.cp-total b{ font:800 clamp(1.9rem,3.6vw,2.6rem)/1 var(--font-display); color:#0f4d72; letter-spacing:-.02em; }
.cp-receipt .foot{ margin:12px 0 0; font-size:13px; color:#5f7079; line-height:1.5; }
.cp-stage{ margin-bottom:clamp(40px,6vw,90px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; margin-top:36px; }
.cp-stage > *{ min-width:0; }
.cp-stage .cp-receipt{ position:sticky; top:96px; }
.cp-stage [data-step]{ margin-bottom:16vh; }

/* ------------------------------------------------------------------ FAQ --- */
.cp-faq{ margin:30px 0 0; max-width:78ch; border-top:1px solid var(--border); }
.cp-faq details{ border-bottom:1px solid var(--border); }
.cp-faq summary{ cursor:pointer; list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:20px 0; font:700 1.08rem/1.35 var(--font-display); color:var(--text); }
.cp-faq summary::-webkit-details-marker{ display:none; }
.cp-faq summary::after{ content:"+"; font:400 1.6rem/1 var(--font-body); color:var(--primary); }
.cp-faq details[open] summary::after{ content:"\2013"; }
.cp-faq .a{ padding:0 0 22px; }
.cp-faq .a p{ margin:0 0 12px; font-size:16px; line-height:1.65; color:var(--text-muted); }
.cp-faq .a p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------- sources ---- */
.cp-src{ margin:26px 0 0; padding-left:22px; max-width:82ch; }
.cp-src li{ margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--text-muted); }
.cp-src li b{ color:var(--text); }
.cp-src a{ overflow-wrap:anywhere; }

/* ----------------------------------------------------- the other three ---- */
.cp-more{ list-style:none; margin:28px auto 0; padding:0; max-width:760px; text-align:left; counter-reset:more; }
.cp-more li{ counter-increment:more; border-top:1px solid rgba(var(--accent-rgb),.18); }
.cp-more li:last-child{ border-bottom:1px solid rgba(var(--accent-rgb),.18); }
.cp-more a{ display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:16px 2px; text-decoration:none; color:#eaf4fa; }
.cp-more a::before{ content:counter(more, decimal-leading-zero); font:800 14px/1 var(--font-display); color:var(--accent); }
.cp-more a::after{ content:"\2192"; color:var(--accent); }
.cp-more a b{ font:700 1.05rem/1.35 var(--font-display); }
.cp-more a span{ display:block; font-size:14px; color:#a8c4d5; margin-top:3px; }
.cp-more a:hover b{ color:var(--accent); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .cp-hero, .cp-two, .cp-two--flip, .cp-stage{ grid-template-columns:1fr; gap:36px; }
  .cp-two figure{ position:static; }
  .cp-two .tilt-plate > img{ aspect-ratio:4/3; }
  .cp-stage .cp-receipt{ position:static; }
  .cp-stage [data-step]{ margin-bottom:18px; }
  .cp-two--flip > figure{ order:2; }
}
@media (max-width:620px){
  .cp-pull{ grid-template-columns:1fr; gap:10px; }
  .cp-receipt{ padding:20px 16px 18px; }
  .cp-list > li{ grid-template-columns:2.4rem minmax(0,1fr); }
  .cp-table tbody th{ width:auto; }
}
@media (prefers-reduced-motion: reduce){
  .cp-line{ opacity:1 !important; }
}

/* phones: the comparison tables stack, one row per block, so no column is
   ever hidden off to the side */
@media (max-width:620px){
  .cp-scroll{ overflow:visible; }
  .cp-table, .cp-table--2, .cp-table--3{ min-width:0; }
  .cp-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cp-table, .cp-table tbody, .cp-table tr, .cp-table th, .cp-table td{ display:block; width:auto; }
  .cp-table caption{ display:block; }
  .cp-table tr{ padding:16px 0 10px; border-bottom:1px solid var(--border); }
  .sec--dark .cp-table tr{ border-bottom-color:rgba(var(--accent-rgb),.16); }
  .cp-table tbody th{ border:0; padding:0 0 8px; font-size:16px; }
  .cp-table td{ border:0; padding:4px 0 6px 7.9rem; position:relative; min-height:1.6em; }
  .cp-table td::before{ content:attr(data-label); position:absolute; left:0; top:7px; width:7.2rem; line-height:1.3; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); padding-top:3px; }
  .sec--dark .cp-table td::before{ color:#7f9db0; }
  .cp-table td.us::before{ color:var(--primary); }
  .sec--dark .cp-table td.us::before{ color:var(--accent); }
  .cp-table .num{ white-space:normal; }
}