/* Pricing page (/pricing/ and /es/pricing/). Both pages share this sheet so the English and
   Spanish layouts cannot drift apart. Loads after kudo-marketing.css and builds on its tokens.

   Section rhythm, top to bottom, so the eye always knows where one block ends:
   hero (soft mint wash) / plans + good to know (white) / why per location (mint band) /
   stands and cards (white) / compared with CMMS (grey) / services (white) /
   questions (grey) / closing CTA (dark). */

/* ---------- hero ----------
   One centred column: pill, headline, lede, three facts as chips, then a light pair of jump
   links. It replaces two big mint boxes that only linked further down the page. */
.pr-hero { position:relative; overflow:hidden; isolation:isolate; text-align:center; padding:76px 0 36px;
           background:radial-gradient(56% 90% at 50% 0%, rgba(47,158,99,.15) 0%, rgba(47,158,99,0) 72%),
                      linear-gradient(180deg, #f1f9f4 0%, #f8fcfa 55%, #fff 100%); }
/* The home hero's dot grid, faded out from the top centre so it never meets the plans. */
.pr-hero::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
                   background-image:radial-gradient(rgba(21,128,61,.13) 1px, transparent 1px); background-size:22px 22px;
                   -webkit-mask-image:radial-gradient(60% 75% at 50% 0%, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
                   mask-image:radial-gradient(60% 75% at 50% 0%, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%); }
.pr-hero-in { max-width:1040px; margin:0 auto; }
.pr-tag { display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
          border:1px solid var(--kp-g-line,#bfe6d0); background:rgba(255,255,255,.9); color:var(--kp-g-dark,#15803d);
          font-size:13px; font-weight:600; line-height:1.2; }
.pr-tag::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--kp-g-bright,#44b276);
                  box-shadow:0 0 0 3px rgba(68,178,118,.18); }
.ind .pr-hero h1 { font-size:clamp(38px,5.2vw,62px); line-height:1.05; font-weight:900; letter-spacing:-.035em;
                   margin:22px 0 0; text-wrap:balance; }
.ind .pr-hero h1 em { display:block; font-style:normal; color:var(--kp-g,#2f9e63); }
.ind .pr-lede { font-size:18.5px; line-height:1.6; max-width:56ch; margin:20px auto 0; text-wrap:balance; }

.pr-facts { list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pr-facts li { display:inline-flex; align-items:center; gap:9px; padding:8px 15px 8px 9px; border-radius:999px;
               background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(16,24,40,.04);
               font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.3; text-align:left; }
.pr-facts li b { font-weight:700; }
.pr-ck { flex:none; width:22px; height:22px; border-radius:50%; background:var(--kp-g-soft,#eafaf1); color:var(--kp-g-dark,#15803d);
         display:flex; align-items:center; justify-content:center; }
.pr-ck svg { width:13px; height:13px; }

/* Jump links as a quiet segmented pair, not two more cards. */
.pr-seg { display:inline-flex; gap:4px; margin-top:34px; padding:4px; border-radius:14px;
          background:rgba(255,255,255,.75); border:1px solid var(--line); box-shadow:0 1px 2px rgba(16,24,40,.04); }
.ind .pr-seg a { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px;
                 font-size:14.5px; font-weight:600; color:var(--ink2); line-height:1.2; white-space:nowrap;
                 transition:background .15s, color .15s; }
.ind .pr-seg a:hover, .ind .pr-seg a:focus-visible { background:var(--kp-g-soft,#eafaf1); color:var(--kp-g-dark,#15803d); text-decoration:none; }
.pr-seg svg { width:16px; height:16px; flex:none; color:var(--kp-g,#2f9e63); }
.pr-seg .ar { width:14px; height:14px; color:currentColor; opacity:.55; }

@media (max-width:600px) {
    .pr-hero { padding:44px 0 20px; }
    .ind .pr-lede { font-size:16.5px; margin-top:16px; }
    .pr-facts { flex-direction:column; align-items:center; gap:8px; margin-top:24px; }
    .pr-facts li { font-size:14px; }
    .pr-seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin-top:26px; }
    .ind .pr-seg a { justify-content:center; padding:11px 8px; font-size:14px; gap:7px; white-space:normal; text-align:center; }
    .pr-seg svg { display:none; }
}

/* ---------- plans ---------- */
#plans { padding-top:40px; scroll-margin-top:90px; }
#hardware { scroll-margin-top:90px; }
.pr-plans-head { text-align:center; margin-bottom:44px; }
.pr-plans-head .eyebrow { margin-bottom:10px; }
@media (max-width:600px) { #plans { padding-top:32px; } .pr-plans-head { margin-bottom:36px; } }

.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:24px; align-items:start; }
/* Roomier and lighter than it was: a pricing page is read slowly and compared, so the
   type is bigger, the weights are lower, and the lines have room to breathe. */
.plan { position:relative; background:#fff; border:1px solid var(--kp-line); border-radius:var(--kp-radius-lg); padding:38px 34px;
        box-shadow:var(--kp-shadow); transition:box-shadow .2s var(--kp-ease), border-color .2s; }
.plan:hover { box-shadow:var(--kp-shadow-hover); }
/* The middle tier is where most people should land, so it says so. */
.plan.hot { border:2px solid var(--kp-g); padding:37px 33px; box-shadow:0 2px 4px rgba(16,24,40,.05), 0 24px 48px -24px rgba(47,158,99,.35); }
.plan-flag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px;
             background:var(--kp-g-soft); color:var(--kp-g-dark); border:1px solid var(--kp-g-line);
             font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.plan-flag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--kp-g); }
.plan h3 { font-size:17px; font-weight:700; color:var(--ink2); letter-spacing:0; }
.plan-top { display:flex; align-items:center; gap:8px; }
/* foundation.css uppercases buttons and gives them a bottom margin; both undone here. */
.plan-i { width:19px; height:19px; flex:0 0 19px; margin:0; padding:0; border-radius:50%;
          border:1px solid #cfd8e3; background:#fff; color:#8a96a6; cursor:pointer;
          font:700 11px/1 Georgia, serif; text-transform:none; display:flex;
          align-items:center; justify-content:center; }
.plan-i:hover, .plan-i[aria-expanded="true"] { border-color:var(--br); background:var(--brs); color:var(--br); }
/* Overlays the card rather than pushing it, so opening one does not shove the three
   cards out of alignment with each other. */
.plan-exp { position:absolute; left:18px; right:18px; top:58px; z-index:6; background:#fff;
            border:1px solid var(--line); border-radius:13px; padding:16px 18px;
            box-shadow:0 16px 40px rgba(11,18,32,.16); font-size:13.5px; line-height:1.65;
            color:var(--ink2); text-align:left; }
.plan-exp strong { display:block; font-size:11px; font-weight:800; letter-spacing:1.1px;
                   text-transform:uppercase; color:var(--br); margin-bottom:7px; }
.plan-price { display:flex; align-items:baseline; gap:7px; margin:8px 0 0; }
.plan-amt { font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.plan-per { font-size:14px; font-weight:600; color:var(--kp-muted); }
.plan .plan-blurb { font-size:15px; line-height:1.6; margin:12px 0 24px; min-height:72px; text-wrap:pretty; }
@media (max-width:600px) { .plan { padding:30px 24px; } .plan.hot { padding:29px 23px; } .plan .plan-blurb { min-height:0; } }
/* The plan button is a kp-btn (classes emitted by pricing.aspx.vb); this only makes it full width. */
.plan-btn { display:flex; width:100%; margin:0 0 28px; }
/* "Everything in X, plus:" heads the list it qualifies, under the button. */
.plan-inh { font-size:13px; font-weight:700; color:var(--kp-g-dark); margin:0; padding:18px 0 0; border-top:1px solid var(--line); }
.plan ul { list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--line); }
.plan ul.inh { border-top:0; padding-top:6px; }
.plan li, .pr-note p, .strip p, .qa-i p, .vs p, .end p, .pr-why p, .sr-line p { text-wrap:pretty; }
.sec h2, .end h2 { text-wrap:balance; }
/* kp-check marks, drawn with CSS so the plan list generated in pricing.aspx.vb stays as it is. */
.plan li { font-size:15px; color:var(--ink2); line-height:1.5; padding:8px 0 8px 32px; position:relative; }
.plan li::before { content:''; position:absolute; left:0; top:9px; width:20px; height:20px; border-radius:50%; background:var(--kp-g-soft); }
.plan li::after { content:''; position:absolute; left:4px; top:13px; width:12px; height:12px; background:var(--kp-g-dark);
                  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Same size as every other item; only the marker differs. */
.plan li.star::before { background:#fffaeb; }
.plan li.star::after { background:#f79009; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- good to know ----------
   Three short answers under the plans, open on the page: no borders, no fills, wide gaps.
   A hairline above sets them apart from the cards without making a fourth box. */
.pr-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px; margin-top:72px; padding-top:48px;
            border-top:1px solid var(--line); }
.pr-note-i { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px;
             background:var(--kp-g-soft,#eafaf1); color:var(--kp-g-dark,#15803d); margin-bottom:18px; }
.pr-note-i svg { width:20px; height:20px; }
.pr-note h3 { font-size:17px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em; }
.pr-note p { font-size:15px; line-height:1.65; }
.pr-note-cta { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:14.5px; font-weight:600; color:var(--br); }
.pr-note-cta svg { width:15px; height:15px; transition:transform .2s var(--kp-ease); }
.pr-note-cta:hover { color:var(--kp-g-dark,#15803d); }
.pr-note-cta:hover svg { transform:translateX(3px); }
@media (max-width:860px) { .pr-notes { grid-template-columns:minmax(0,1fr); gap:32px; margin-top:56px; padding-top:40px; }
                           /* Stacked, the icon sits beside the answer instead of above it. */
                           .pr-note { display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:16px; }
                           .pr-note-i { grid-row:1 / span 3; margin:0; }
                           .pr-note h3 { margin-top:9px; } }

/* ---------- why per location ----------
   Its own full-width mint band, with the statement on the left and the three points on the
   right, ruled rather than boxed. The only tinted green band on the page besides the hero. */
.pr-why { position:relative; overflow:hidden; padding:104px 0;
          background:radial-gradient(48% 70% at 0% 0%, rgba(47,158,99,.12) 0%, rgba(47,158,99,0) 70%),
                     linear-gradient(180deg, #eef8f2 0%, #f3faf6 100%);
          border-top:1px solid #dcefe4; border-bottom:1px solid #dcefe4; }
.pr-why-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:88px; align-items:start; }
.pr-why .eyebrow { color:var(--kp-g-dark,#15803d); }
.ind .pr-why h2 { font-size:clamp(32px,3.8vw,46px); font-weight:900; line-height:1.08; letter-spacing:-.03em; margin-top:14px; }
.pr-why .lede { font-size:17.5px; line-height:1.7; margin-top:20px; max-width:46ch; }
.pr-why-list { list-style:none; margin:0; padding:0; counter-reset:pw; border-top:1px solid #cfe7da; }
.pr-why-list li { position:relative; counter-increment:pw; padding:28px 0 28px 64px; border-bottom:1px solid #cfe7da; }
.pr-why-list li::before { content:counter(pw,decimal-leading-zero); position:absolute; left:0; top:27px;
                          font-size:24px; font-weight:900; line-height:1; letter-spacing:-.02em; color:var(--kp-g,#2f9e63);
                          font-variant-numeric:tabular-nums; }
.pr-why-list h3 { font-size:18px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em; }
.pr-why-list p { font-size:15.5px; line-height:1.65; }
@media (max-width:900px) { .pr-why { padding:72px 0; } .pr-why-grid { grid-template-columns:minmax(0,1fr); gap:40px; } }
@media (max-width:600px) { .pr-why { padding:60px 0; } .pr-why-list li { padding:24px 0 24px 50px; } .pr-why-list li::before { top:24px; font-size:24px; } }

/* ---------- stands and cards ---------- */
.hw { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:24px; }
.hw-c { padding:0; overflow:hidden; }
a.hw-c { display:flex; flex-direction:column; color:inherit; }
/* One image box for all three cutouts, so the stand and the two cards sit at the same height. */
.hw-img { height:236px; display:flex; align-items:center; justify-content:center; padding:24px;
          background:radial-gradient(70% 70% at 50% 45%, #fff 0%, rgba(255,255,255,0) 72%), linear-gradient(162deg,#f5faf7 0%,#eaf1ee 100%);
          border-bottom:1px solid var(--line); }
.hw-img img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 14px 18px rgba(16,24,40,.16));
              transition:transform .3s var(--mk-ease); }
a.hw-c:hover .hw-img img { transform:translateY(-4px); }
.hw-b { display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
.hw-price { display:flex; align-items:baseline; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.hw-amt { font-size:36px; font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--ink); }
.hw-each { font-size:14px; font-weight:600; color:var(--kp-muted); }
.hw-sub { font-size:14px; font-weight:600; color:var(--kp-g-dark); margin-top:6px; min-height:21px; }
.hw-b > p { flex:1; }
.hw-c h3 { font-size:18px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em; }
.hw-c p { font-size:15px; line-height:1.65; }
.hw-c .go { display:inline-block; margin-top:12px; padding-top:14px; font-size:14px; font-weight:600; color:var(--br); }
.hw-c .go:hover { color:var(--kp-g-dark); text-decoration:underline !important; }

/* Smart Review: a ruled note under the products rather than a fourth card. */
.sr-line { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:20px; margin-top:48px; padding-top:32px;
           border-top:1px solid var(--line); }
.sr-line .kp-icon { flex:none; }
.sr-line h3 { font-size:17px; font-weight:700; margin:0 0 6px; }
.sr-line p { font-size:15px; line-height:1.65; max-width:70ch; }
.sr-line p.sr-why { font-size:14px; color:var(--kp-muted); margin-top:8px; }
.sr-line .go { align-self:center; flex:none; font-size:14.5px; font-weight:600; color:var(--br); white-space:nowrap; }
.sr-line .go:hover { color:var(--kp-g-dark); text-decoration:underline !important; }
@media (max-width:760px) { .sr-line { grid-template-columns:auto minmax(0,1fr); }
                           .sr-line .go { grid-column:2; align-self:start; white-space:normal; } }

/* ---------- compared with maintenance software ---------- */
.head.center { text-align:center; }
.head.center .lede { margin-left:auto; margin-right:auto; }
.vs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; max-width:980px; margin:0 auto;
      border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--kp-shadow); }
.vs > div { padding:38px 40px; }
.vs > div:first-child { border-right:1px solid var(--line); background:#fafbfc; }
.vs h3 { font-size:17px; font-weight:700; margin-bottom:14px; letter-spacing:-.01em; }
.vs p { font-size:15.5px; line-height:1.7; }
.vs .big { font-size:44px; font-weight:800; letter-spacing:-.035em; line-height:1; margin-bottom:8px; color:var(--kp-muted,#98a2b3); }
.vs .big.hot { color:var(--kp-g); }
.vs-per { font-size:13px; font-weight:700; margin-bottom:14px; color:#98a2b3; }
@media (max-width:760px) { .vs { grid-template-columns:minmax(0,1fr); } .vs > div { padding:30px 26px; }
                           .vs > div:first-child { border-right:none; border-bottom:1px solid var(--line); } }

/* ---------- services: three items separated by a rule, not three more boxes ---------- */
.strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
.strip > div { padding:28px 32px 6px; border-right:1px solid var(--line); }
.strip > div:last-child { border-right:0; }
.strip > div:first-child { padding-left:0; }
.strip h3 { font-size:16.5px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em; }
.strip p { font-size:15px; line-height:1.65; }
@media (max-width:860px) { .strip { grid-template-columns:minmax(0,1fr); }
                           .strip > div { border-right:0; border-bottom:1px solid var(--line); padding:24px 0; }
                           .strip > div:last-child { border-bottom:0; } }

/* ---------- questions: two ruled columns, no boxes ---------- */
.qa { columns:2; column-gap:64px; }
.qa-i { break-inside:avoid; padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.qa-i h3 { font-size:16.5px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em; }
.qa-i p { font-size:15px; line-height:1.65; }
@media (max-width:820px) { .qa { columns:1; } }

/* Keep the inline "see how it works" link in a lede on one line where there is room. */
@media (min-width:601px) { .sec .lede a { white-space:nowrap; } }

/* Heading scale. */
.sec h2.h-xl { font-size:clamp(36px,4.4vw,52px); letter-spacing:-.035em; font-weight:900; }
.sec h2.h-lg { font-size:clamp(32px,4vw,46px); letter-spacing:-.03em; font-weight:900; }