/* Comparison + landing pages. Loaded with base.css, home.css and content.css,
   so buttons, FAQ, .mspk-end and prose come from those. */
#mspk .mspk-lp{padding-top:clamp(28px,5vw,56px);padding-bottom:clamp(24px,4vw,48px);}
#mspk .mspk-lp .mspk-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--mspk-muted);margin-bottom:22px;}
#mspk .mspk-lp .mspk-crumbs a{color:var(--mspk-muted);}
#mspk .mspk-lp .mspk-crumbs a:hover{color:var(--mspk-green);}

#mspk .mspk-lp__head{max-width:860px;margin:0 auto;text-align:center;}
#mspk .mspk-lp__head .mspk-lede{margin-left:auto;margin-right:auto;}
#mspk .mspk-lp__head .mspk-hero__cta{margin-top:26px;}
#mspk .mspk-lp__meta{margin-top:18px;font-size:13.5px;color:var(--mspk-muted);}

#mspk .mspk-lp__sec{max-width:1000px;margin:clamp(40px,6vw,72px) auto 0;}
#mspk .mspk-lp__sec.mspk-center{text-align:center;}
#mspk .mspk-lp__h2{margin-bottom:22px;text-align:left;}
#mspk .mspk-lp__sec.mspk-center .mspk-lp__h2{text-align:center;}
#mspk .mspk-lp .mspk-prose{max-width:820px;}

/* Which one fits you */
#mspk .mspk-lp__choose{display:grid;gap:16px;grid-template-columns:1fr;}
#mspk .mspk-lp__card{background:#fff;border:1px solid var(--mspk-line);border-radius:var(--mspk-r);padding:24px 26px;box-shadow:var(--mspk-shadow);}
#mspk .mspk-lp__card--us{background:var(--mspk-green);border-color:var(--mspk-green);color:#fff;}
#mspk .mspk-lp__card h3{font-family:var(--mspk-hd);font-size:20px;line-height:1.2;margin-bottom:14px;}
#mspk .mspk-lp__card--us h3{color:#fff;}
#mspk .mspk-lp__card ul{display:grid;gap:10px;}
#mspk .mspk-lp__card li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55;}
#mspk .mspk-lp__card li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--mspk-orange);}
@media (min-width:760px){#mspk .mspk-lp__choose{grid-template-columns:1fr 1fr;}}

/* Comparison table */
#mspk .mspk-lp__tblwrap{overflow-x:auto;border:1px solid var(--mspk-line);border-radius:var(--mspk-r);background:#fff;box-shadow:var(--mspk-shadow);}
#mspk .mspk-lp__tbl{min-width:640px;font-size:15px;line-height:1.5;}
#mspk .mspk-lp__tbl th,#mspk .mspk-lp__tbl td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--mspk-line);}
#mspk .mspk-lp__tbl thead th{background:var(--mspk-cream);font-family:var(--mspk-hd);font-size:15px;}
#mspk .mspk-lp__tbl tbody th{width:20%;font-family:var(--mspk-hd);font-weight:normal;color:var(--mspk-green);}
#mspk .mspk-lp__tbl tbody tr:last-child th,#mspk .mspk-lp__tbl tbody tr:last-child td{border-bottom:0;}
/* The parent theme stripes table rows; flatten that so only our column tint shows. */
#mspk .mspk-lp__tbl tbody tr > td,#mspk .mspk-lp__tbl tbody tr > th{background:#fff;}
#mspk .mspk-lp__tbl tbody tr > .mspk-lp__us{background:var(--mspk-cream-lt);}
#mspk .mspk-lp__tbl thead .mspk-lp__us{background:var(--mspk-orange-soft);}
#mspk .mspk-lp__note{margin-top:12px;font-size:13px;color:var(--mspk-muted);}

/* Steps */
#mspk .mspk-lp__steps{counter-reset:s;display:grid;gap:14px;max-width:820px;}
#mspk .mspk-lp__steps li{counter-increment:s;position:relative;list-style:none;padding:16px 18px 16px 62px;background:#fff;border:1px solid var(--mspk-line);border-radius:14px;font-size:16px;line-height:1.55;}
#mspk .mspk-lp__steps li::before{content:counter(s);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:var(--mspk-orange);color:#fff;font-family:var(--mspk-hd);display:flex;align-items:center;justify-content:center;}

/* Hub tiles */
#mspk .mspk-lp__grid{display:grid;gap:16px;grid-template-columns:1fr;}
#mspk .mspk-lp__tile{position:relative;display:flex;flex-direction:column;gap:14px;justify-content:space-between;min-height:150px;padding:24px 24px 20px;background:#fff;border:1px solid var(--mspk-line);border-radius:var(--mspk-r);box-shadow:var(--mspk-shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
#mspk .mspk-lp__tile:hover{transform:translateY(-3px);box-shadow:var(--mspk-shadow-lg);border-color:var(--mspk-orange);}
#mspk .mspk-lp__tile strong{font-family:var(--mspk-hd);font-weight:normal;font-size:20px;line-height:1.25;color:var(--mspk-green);}
#mspk .mspk-lp__tile-cta{font-size:14px;color:var(--mspk-orange-dk);}
#mspk .mspk-lp__badge{align-self:flex-start;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--mspk-cream);color:var(--mspk-green);}
#mspk .mspk-lp__badge--pro{background:var(--mspk-orange-soft);color:var(--mspk-orange-dk);}
@media (min-width:640px){#mspk .mspk-lp__grid{grid-template-columns:1fr 1fr;}}
@media (min-width:980px){#mspk .mspk-lp__grid{grid-template-columns:repeat(3,1fr);}}

/* Link list + sources */
#mspk .mspk-lp__links{display:grid;gap:10px;}
#mspk .mspk-lp__links a{color:var(--mspk-orange-dk);text-decoration:underline;text-underline-offset:3px;font-size:16.5px;}
#mspk .mspk-lp__links a:hover{color:var(--mspk-green);}
#mspk .mspk-lp__srch{font-family:var(--mspk-hd);font-size:15px;color:var(--mspk-muted);margin-bottom:10px;}
#mspk .mspk-lp__sources{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;}
#mspk .mspk-lp__sources a{color:var(--mspk-muted);text-decoration:underline;text-underline-offset:2px;}

/* Phones: a three-column table would scroll sideways, so each row becomes a
   small card - the feature name, then Maspik and the other tool one above the other. */
@media (max-width:640px){
  #mspk .mspk-lp__tblwrap{overflow:visible;border:0;background:none;box-shadow:none;}
  #mspk .mspk-lp__tbl{min-width:0;}
  #mspk .mspk-lp__tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  #mspk .mspk-lp__tbl,#mspk .mspk-lp__tbl tbody,#mspk .mspk-lp__tbl tr,#mspk .mspk-lp__tbl tbody th,#mspk .mspk-lp__tbl td{display:block;width:100%;}
  #mspk .mspk-lp__tbl tbody tr{margin-bottom:14px;background:#fff;border:1px solid var(--mspk-line);border-radius:14px;overflow:hidden;box-shadow:var(--mspk-shadow);}
  #mspk .mspk-lp__tbl tbody th{padding:12px 16px;border-bottom:1px solid var(--mspk-line);background:var(--mspk-cream);}
  #mspk .mspk-lp__tbl td{padding:12px 16px;border-bottom:1px solid var(--mspk-line);}
  #mspk .mspk-lp__tbl tbody tr:last-child td{border-bottom:1px solid var(--mspk-line);}
  #mspk .mspk-lp__tbl tbody tr td:last-child{border-bottom:0;}
  #mspk .mspk-lp__tbl td::before{content:attr(data-label);display:block;margin-bottom:3px;font-family:var(--mspk-hd);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mspk-muted);}
  #mspk .mspk-lp__card{padding:20px;}
}