/* Pricing: the hero's service summary, then one service at a time under a selector styled
   like Our services on the home page. Without JavaScript the three services stack. */
.pricing-page{--price-out:cubic-bezier(.16,1,.3,1)}

/* Hero: what you pay depends on the service */
.price-mix{padding:30px;border:1px solid #fff;border-radius:28px;background:#ffffff94;box-shadow:0 20px 50px #20472b0f}
.price-mix-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.price-mix-list li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid #e6ede1}
.price-mix-list strong{display:block;font-size:16px;font-weight:600;line-height:1.25;color:var(--forest)}
.price-mix-list div span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:#536456}
.price-mix-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:#e3ecd9}
.price-mix-icon svg{width:21px;height:21px;fill:none;stroke:#205732;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.price-mix-combo{display:flex;align-items:center;gap:14px;margin:16px 0 0;padding:14px 16px;border-radius:18px;border:1px dashed #b9cfb0;font-size:14px;line-height:1.5;color:#405447}
.story-page .page-hero .price-mix-combo{max-width:none;font-size:14px}

/* Pricing details */
.price-section{background:#eef3ec}
.price-section .story-heading{margin-bottom:24px}
.price-explorer{margin-top:0}
.price-switch{position:relative;display:flex;width:100%;margin:0 0 32px;padding:5px;gap:4px;border:1px solid rgba(32,87,50,.16);border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff}
.price-switch[hidden]{display:none}
.price-switch-thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:var(--thumb-w,0);border-radius:999px;background:#205732;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(6,25,13,.16);transform:translateX(var(--thumb-x,5px));transition:transform .6s var(--price-out),width .6s var(--price-out)}
.price-tab{position:relative;z-index:1;display:inline-flex;flex:1;min-width:0;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:0 24px;border:0;border-radius:999px;background:none;color:#3d4a42;font:inherit;font-size:15px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:color .45s var(--price-out)}
.price-tab-num{font-size:12px;font-weight:600;letter-spacing:.06em;color:#64756a;font-variant-numeric:tabular-nums;transition:color .45s var(--price-out)}
.price-tab[aria-selected=true]{color:#fff}
.price-tab[aria-selected=true] .price-tab-num{color:rgba(255,255,255,.72)}
.price-tab:focus-visible{outline:2px solid #205732;outline-offset:3px}
@media(hover:hover){.price-tab[aria-selected=false]:hover,.price-tab[aria-selected=false]:hover .price-tab-num{color:#205732}}

.price-panel .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.price-panel{display:grid;gap:28px}
.price-panel+.price-panel{margin-top:64px;padding-top:64px;border-top:1px solid rgba(32,87,50,.14)}
.is-ready .price-panel+.price-panel{margin-top:0;padding-top:0;border-top:0}
.price-panel[hidden]{display:none}
.is-ready .price-panel:not([hidden]) .price-main>*,.is-ready .price-panel:not([hidden]) .price-side>*{animation:price-in .7s var(--price-out) both}
.is-ready .price-panel:not([hidden]) .price-side>*{animation-delay:.08s}
@keyframes price-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.price-figure{margin:0;font-size:clamp(38px,3.9vw,56px);font-weight:600;line-height:1;letter-spacing:-.05em;color:#205732}
.price-figure span{color:#479b20}
.price-pair{display:flex;flex-wrap:wrap;gap:12px 40px}
.price-pair p{margin:0;display:flex;align-items:baseline;gap:10px;color:#4d6152;font-size:16px}
.price-pair strong{font-size:clamp(46px,4.6vw,66px);font-weight:600;line-height:.95;letter-spacing:-.05em;color:#205732}
.price-pair p+p strong{color:#479b20}
.story-page .price-blurb{max-width:34em;margin:14px 0 0;font-size:16px;line-height:1.6;color:#3d4a42}
.story-page .price-sub{margin:24px 0 0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#64756a}

/* Payment timeline: a dot per step on a thin line, with a tag saying what is paid when */
.pay-steps{position:relative;display:grid;margin:8px 0 0;padding:0;list-style:none}
.pay-steps:before{content:'';position:absolute;left:8px;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(#b9d3aa,#205732)}
.pay-steps li{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:16px;align-items:start;padding:9px 0}
.pay-dot{position:relative;z-index:1;width:18px;height:18px;margin-top:2px;border-radius:50%;background:#eef3ec;border:4px solid #8fbf74}
.pay-steps li:last-child .pay-dot{border-color:#205732}
.pay-steps strong{display:block;font-size:16px;font-weight:600;line-height:1.3;color:#183f29}
.pay-steps div span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:#56635a}
.pay-tag{align-self:center;margin-top:0;padding:5px 11px;border-radius:999px;font-size:12px;font-style:normal;font-weight:600;line-height:1.2;white-space:nowrap}
.pay-tag--free{background:#dcebcf;color:#205732}
.pay-tag--due{background:#205732;color:#fff}
.pay-tag--monthly{background:#479b20;color:#fff}



/* What the monthly fee covers */
.price-side{display:grid;gap:16px;align-content:start}
.price-covers{padding:24px 26px;border:1px solid rgba(255,255,255,.92);border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.7));box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(20,60,35,.08)}
.story-page .price-covers h4{margin:0;font-size:21px;font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--forest)}
.price-covers ul{display:grid;gap:2px;margin:14px 0 0;padding:0;list-style:none}
.price-covers li{display:flex;align-items:center;gap:14px;padding:6px 0;font-size:15px;line-height:1.45;color:#2f3d34}
.cover-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:#e3ecd9}
.cover-icon svg{width:19px;height:19px;fill:none;stroke:#205732;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.price-promise{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:22px;background:radial-gradient(80% 120% at 100% 0%,rgba(168,237,125,.35),transparent 65%),#205732;color:#fff}
.price-promise svg{flex:none;width:26px;height:26px;padding:4px;border-radius:50%;background:rgba(255,255,255,.16);fill:none;stroke:#c1e5a8;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.price-promise strong{display:block;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.price-promise span{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.82)}

@media(max-width:560px){
  .price-mix{padding:22px}
  .price-switch{gap:0}
  .price-tab{padding:0 6px;font-size:14px}
  .price-tab-num{display:none}
  .pay-steps li{grid-template-columns:18px minmax(0,1fr);row-gap:8px}
  .pay-tag{grid-column:2;justify-self:start}
  .price-covers{padding:24px 20px}
}
@media(min-width:700px){@media(min-width:1000px){
  .price-panel{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:start}
}
@media(prefers-reduced-motion:reduce){
  .price-switch-thumb,.price-tab,.price-tab-num{transition:none}
  .is-ready .price-panel:not([hidden]) .price-main>*,.is-ready .price-panel:not([hidden]) .price-side>*{animation:none}
}
@media(prefers-reduced-transparency:reduce){.price-mix,.price-covers{background:#fbfcfa}}