/* Home: pricing (patterns/home-pricing.php). Three package cards; the switch above them adds each card's hosting list
   (assets/js/sections/hm-pricing.js). A list item with a nested list "hm-pricing__tip" shows that nested list as a hint
   on hover or focus. Rules that hide things wait for the script (.hm-pricing--js), so the editor and a page without
   the script show every item. Delivery-time bar length: class hm-pricing__time--25 · 40 · 60 · 85 · 100. */
@property --hm-pricing-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

.hm-pricing{
  --hm-pricing-chk:14px;
  --hm-pricing-chk-i:9px;
  --hm-pricing-slide:400px;
  --hm-pricing-tip-w:240px;
  --hm-pricing-feat-bw:1.5px;
  --hm-pricing-lift:6px;
  --hm-pricing-lift-shadow:0 24px 50px var(--shadow);
  --hm-pricing-ribbon-shadow:0 6px 16px var(--shadow);
  --hm-pricing-pill-shadow:0 1px 3px var(--shadow);
  --hm-pricing-tg-pad:3px;
  --hm-pricing-tg-h:32px;
  --hm-pricing-tg-r:6px;
  --hm-pricing-track:.1em;
  --hm-pricing-track-tg:.08em;
  --hm-pricing-track-num:-0.03em;
  --hm-pricing-spring:cubic-bezier(.34,1.56,.64,1);
  --hm-pricing-spring-dur:260ms;
  --hm-pricing-stretch-dur:150ms;
  --hm-pricing-spin-dur:6s;
  --hm-pricing-li-dur:480ms;
  --hm-pricing-li-step:70ms;
  --hm-pricing-meter-dur:1s;
  --hm-pricing-delay:300ms;
  --hm-pricing-z-btn:1;
  --hm-pricing-z-ribbon:3;
  --hm-pricing-z-tip:5;
}
.hm-pricing .page > *{margin:0}
.hm-pricing .page > .sec-head{margin-bottom:var(--gap-head)}
.hm-pricing .page .pledge{margin-top:var(--gap-head)}

/* scope switch: two core buttons; the script adds the sliding thumb and aria-pressed */
.hm-pricing .page > .hm-pricing__toggle{position:relative;width:fit-content;margin:0 auto var(--s-7);padding:var(--hm-pricing-tg-pad);gap:var(--hm-pricing-tg-pad);flex-wrap:nowrap;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--paper-2)}
.hm-pricing__toggle .wp-block-button{margin:0}
.hm-pricing__toggle .wp-block-button__link{position:relative;z-index:var(--hm-pricing-z-btn);min-height:var(--hm-pricing-tg-h);padding:0 var(--s-3);border:0;border-radius:var(--hm-pricing-tg-r);background:transparent;box-shadow:none;color:var(--ink-2);font:600 var(--t-xs)/1 var(--font-mono);letter-spacing:var(--hm-pricing-track-tg);transition:color var(--dur) var(--ease-press)}
.hm-pricing__toggle .wp-block-button__link:is(:hover,:active){transform:none;box-shadow:none;color:var(--ink)}
.hm-pricing__toggle .wp-block-button__link[aria-pressed="true"]{color:var(--ink)}
.hm-pricing__pill{position:absolute;top:var(--hm-pricing-tg-pad);bottom:var(--hm-pricing-tg-pad);left:0;border-radius:var(--hm-pricing-tg-r);background:var(--card);box-shadow:var(--hm-pricing-pill-shadow);transition:transform var(--hm-pricing-spring-dur) var(--hm-pricing-spring),width var(--hm-pricing-spring-dur) var(--hm-pricing-spring)}
.hm-pricing__pill--stretch{transition:transform var(--hm-pricing-stretch-dur) var(--ease-out),width var(--hm-pricing-stretch-dur) var(--ease-out)}

/* cards */
.hm-pricing__cards{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid);align-items:stretch}
.hm-pricing__cards > *{margin:0}
.hm-pricing__card{position:relative;display:flex;flex-direction:column;gap:var(--gap-stack);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);transition:transform var(--dur-m) var(--ease-out),box-shadow var(--dur-m) var(--ease-out)}
.hm-pricing__card > *{margin:0}
.hm-pricing__card:hover{transform:translateY(calc(var(--hm-pricing-lift) * -1));box-shadow:var(--hm-pricing-lift-shadow)}
/* edge light that follows the pointer: shared class dg-glow on the card (base.css) */
/* featured: a light running round the border */
.hm-pricing__card--feat{border:var(--hm-pricing-feat-bw) solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--hm-pricing-ang),var(--rule) 0deg,var(--rule) 250deg,var(--accent-fill) 320deg,var(--rule) 360deg) border-box;animation:hm-pricing-spin var(--hm-pricing-spin-dur) linear infinite}
@keyframes hm-pricing-spin{to{--hm-pricing-ang:360deg}}

.hm-pricing__card > .hm-pricing__ribbon{position:absolute;top:0;left:50%;z-index:var(--hm-pricing-z-ribbon);transform:translate(-50%,-50%);padding:var(--s-1) var(--s-3);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--accent-fill);color:var(--on-accent);font:600 var(--t-2xs)/1.4 var(--font-mono);letter-spacing:var(--hm-pricing-track);text-transform:uppercase;white-space:nowrap;box-shadow:var(--hm-pricing-ribbon-shadow)}
.hm-pricing__top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.hm-pricing__top > *{margin:0}
.hm-pricing__top .chip{white-space:nowrap}
.hm-pricing__card h3{font-size:var(--t-xl)}
.hm-pricing__card{container-type:inline-size;--hm-pricing-num-fit:12.5cqi} /* the price shrinks to stay on one line in a narrow card ("From $1,000") */
.hm-pricing__num{font:800 min(var(--t-2xl), var(--hm-pricing-num-fit))/1 var(--font-display);letter-spacing:var(--hm-pricing-track-num);color:var(--ink)}

/* delivery time + bar */
.hm-pricing__time{--hm-pricing-w:50%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-3);font-size:var(--t-xs);color:var(--ink-2)}
.hm-pricing__time strong{font:500 var(--t-xs)/1.4 var(--font-mono);color:var(--ink);white-space:nowrap}
.hm-pricing__time::after{content:"";flex:1 0 100%;height:var(--s-1);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--paper-3) linear-gradient(var(--accent-fill),var(--accent-fill)) no-repeat;background-size:var(--hm-pricing-w) 100%}
.hm-pricing__time--25{--hm-pricing-w:25%}
.hm-pricing__time--40{--hm-pricing-w:40%}
.hm-pricing__time--60{--hm-pricing-w:60%}
.hm-pricing__time--85{--hm-pricing-w:85%}
.hm-pricing__time--100{--hm-pricing-w:100%}

/* what is included: the kit's Checklist style, drawn as a filled tick (circle = item background, tick = ::before).
   Items stay in normal flow, so bold text or a link inside an item stays inline. A hint (nested list) runs under the
   text until the script turns it into a bubble. */
.hm-pricing__card .wp-block-list{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none;font-size:var(--t-s)}
.hm-pricing__card .wp-block-list.is-style-checklist > li{--hm-pricing-chk-y:calc((1lh - var(--hm-pricing-chk)) / 2);display:block;position:relative;margin:0;padding-left:calc(var(--hm-pricing-chk) + var(--s-2));
  background:radial-gradient(circle closest-side,var(--accent-fill) 92%,transparent) 0 var(--hm-pricing-chk-y) / var(--hm-pricing-chk) var(--hm-pricing-chk) no-repeat}
.hm-pricing__card .wp-block-list.is-style-checklist > li::before{content:"";position:absolute;top:var(--hm-pricing-chk-y);left:0;width:var(--hm-pricing-chk);height:var(--hm-pricing-chk);background:var(--on-accent);
  -webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / var(--hm-pricing-chk-i) no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / var(--hm-pricing-chk-i) no-repeat}
.hm-pricing__card .hm-pricing__tip{margin-top:var(--s-1);font-size:var(--t-xs);color:var(--ink-3)}
.hm-pricing__card > .wp-block-buttons{margin-top:auto}
.hm-pricing__card > .hm-pricing__host{margin-top:calc(var(--gap-stack) * -1 + var(--s-2))}

/* hint: the nested list of an item, shown as a dark bubble (front end; the script marks the item .hm-pricing__has-tip) */
.hm-pricing--js .hm-pricing__has-tip{position:relative;cursor:help}
.hm-pricing--js .hm-pricing__has-tip::after{content:"";display:inline-block;width:var(--hm-pricing-chk);height:var(--hm-pricing-chk);margin-left:var(--s-1);vertical-align:middle;background:var(--ink-3);-webkit-mask:url(../../../icons/info.svg?ver=35c2b7ff) center / contain no-repeat;mask:url(../../../icons/info.svg?ver=35c2b7ff) center / contain no-repeat}
.hm-pricing--js .hm-pricing__tip{position:absolute;top:calc(100% + var(--s-2));left:calc(var(--hm-pricing-chk) + var(--s-2));z-index:var(--hm-pricing-z-tip);width:max-content;max-width:var(--hm-pricing-tip-w);margin:0;padding:var(--s-1) var(--s-2);border-radius:var(--r);background:var(--ink);color:var(--paper);font-size:var(--t-xs);line-height:1.45;list-style:none;opacity:0;pointer-events:none;transform:translateY(calc(var(--s-1) * -1));
  transition:opacity var(--dur) var(--ease-press) var(--hm-pricing-delay),transform var(--dur) var(--ease-press) var(--hm-pricing-delay)}
.hm-pricing--js .hm-pricing__tip li{margin:0}
.hm-pricing--js .hm-pricing__has-tip:is(:hover,:focus-visible) > .hm-pricing__tip{opacity:1;transform:none}

/* hosting items: only with "with 12-month hosting" */
.hm-pricing--js:not(.hm-pricing--host) .hm-pricing__host{display:none}
.hm-pricing--host .hm-pricing__host > li{animation:hm-pricing-li-in var(--hm-pricing-li-dur) var(--ease-out) backwards}

/* entrance: items slide in one by one, the time bars grow */
.hm-pricing--pre:not(.hm-pricing--seen) .is-style-checklist > li{opacity:0}
.hm-pricing--seen .is-style-checklist > li{animation:hm-pricing-li-in var(--hm-pricing-li-dur) var(--ease-out) backwards;animation-delay:calc(var(--hm-pricing-i) * var(--hm-pricing-li-step))}
.hm-pricing--pre .hm-pricing__time::after{background-size:0 100%;transition:background-size var(--hm-pricing-meter-dur) var(--ease-out) var(--hm-pricing-delay)}
.hm-pricing--pre.hm-pricing--seen .hm-pricing__time::after{background-size:var(--hm-pricing-w) 100%}
.hm-pricing__card .is-style-checklist > li{--hm-pricing-i:0}
@keyframes hm-pricing-li-in{from{opacity:0;transform:translateX(calc(var(--s-2) * -1))}}

.hm-pricing .page > .hm-pricing__note{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border:1px dashed var(--rule);border-radius:var(--r-card);font-size:var(--t-s);text-align:center;color:var(--ink-2)}
.hm-pricing__note strong{color:var(--ink)}

/* carousel dots (added by the script; narrow screens only) */
.hm-pricing .page > .hm-pricing__dots{display:none;justify-content:center;gap:var(--s-2);margin-top:var(--s-4)}
.hm-pricing__dots button{width:var(--s-2);height:var(--s-2);padding:0;border:0;border-radius:var(--wp--preset--border-radius--radius-full);background:var(--rule);cursor:pointer;transition:width var(--dur-m) var(--ease-out),background-color var(--dur) var(--ease-press)}
.hm-pricing__dots button[aria-current="true"]{width:var(--s-5);background:var(--accent-fill)}

@media (max-width: 991px){
  .hm-pricing__cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(86%, var(--hm-pricing-slide));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:var(--s-5) var(--s-1) var(--s-2);scrollbar-width:none}
  .hm-pricing__card{scroll-snap-align:center}
  .hm-pricing__card:hover{transform:none}
  .hm-pricing .page > .hm-pricing__dots{display:flex}
  /* edges fade while more cards wait on that side (classes set by the script) */
  .hm-pricing__cards.is-fade-r{-webkit-mask-image:linear-gradient(to right,currentColor calc(100% - var(--s-7)),transparent);mask-image:linear-gradient(to right,currentColor calc(100% - var(--s-7)),transparent)}
  .hm-pricing__cards.is-fade-l{-webkit-mask-image:linear-gradient(to left,currentColor calc(100% - var(--s-7)),transparent);mask-image:linear-gradient(to left,currentColor calc(100% - var(--s-7)),transparent)}
  .hm-pricing__cards.is-fade-l.is-fade-r{-webkit-mask-image:linear-gradient(to right,transparent,currentColor var(--s-7),currentColor calc(100% - var(--s-7)),transparent);mask-image:linear-gradient(to right,transparent,currentColor var(--s-7),currentColor calc(100% - var(--s-7)),transparent)}
}
@media (min-width: 600px) and (max-width: 991px){
  .hm-pricing__cards{grid-auto-columns:calc(50% - var(--gap-grid) / 2)}
  .hm-pricing__card{scroll-snap-align:start}
}
/* very narrow phones (320 px): the switch is wider than the page, so it tightens its spacing and, as a last resort, wraps */
@media (max-width: 359px){
  .hm-pricing .page > .hm-pricing__toggle{max-width:100%}
  .hm-pricing__toggle .wp-block-button{min-width:0}
  .hm-pricing__toggle .wp-block-button__link{padding:var(--s-1) var(--s-2);letter-spacing:0;line-height:1.2;white-space:normal}
}
@media (prefers-reduced-motion: reduce){
  .hm-pricing__card,.hm-pricing__pill,.hm-pricing__dots button{transition:none}
  .hm-pricing__card:hover{transform:none}
  .hm-pricing__card--feat{animation:none}
  .hm-pricing--host .hm-pricing__host > li,.hm-pricing--seen .is-style-checklist > li{animation:none}
}