/* pricing page (round 83: Mark's package builder, in the site's own type and
   color; the shared shell lives in site/site.css). Labels are real headings,
   never eyebrows. */
/* round 87: what you get, as a timeline (replaces the seven steps). Three milestones on one bar (sign, launch, Results Review), the website
   card under the build stretch and the navy Growth Services card under the six months. The Growth card's plan switch drives the builder's
   plan radios (and follows them), so the numbers here always match the plan picked below. Under 992px the bar turns vertical and runs down
   the left, milestones and cards in time order; under 768px each card shows its first items and the rest sit behind Show everything.
   White literals on the navy card by the dfy exception. */
.pr-tl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2.2rem 1.4rem;margin-top:3.5rem}
.pr-tl-m{grid-row:1;position:relative;padding-top:4.1rem}
.pr-tl-m--1{grid-column:1}
.pr-tl-m--2{grid-column:2}
.pr-tl-m--3{grid-column:2;justify-self:end;text-align:right}
.pr-tl-dot{position:absolute;top:0;left:0;z-index:2;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;background:var(--field-2);box-shadow:inset 0 0 0 2px var(--lt);color:var(--lt)}
.pr-tl-dot svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pr-tl-m--2 .pr-tl-dot{background:var(--peri);box-shadow:0 0 0 7px rgba(79,155,255,0.22);color:#fff}
.pr-tl-m--3 .pr-tl-dot{left:auto;right:0;background:var(--navy);box-shadow:none;color:#fff}
.pr-tl-m--1::after,.pr-tl-m--2::after{content:"";position:absolute;top:calc(1.6rem - 4px);height:8px;border-radius:4px}   /* the bar: pale through the build, solid through the six months */
.pr-tl-m--1::after{left:3.2rem;right:-1.4rem;background:rgba(79,155,255,0.22)}
.pr-tl-m--2::after{left:3.2rem;right:3.2rem;background:var(--peri)}
.pr-tl-pill{position:absolute;z-index:1;top:1.6rem;left:50%;transform:translate(-50%,-50%);padding:0.35rem 0.95rem;border-radius:999px;background:var(--field-2);box-shadow:0 0 0 1px var(--hair-strong);font-size:var(--t-small);font-weight:var(--w-6);white-space:nowrap}
.pr-tl-m--2 .pr-tl-pill{background:var(--navy);color:#fff;box-shadow:none}
.pr-tl-m h3{font-weight:var(--w-6);font-size:1.4rem;line-height:1.2;letter-spacing:var(--track-h3)}
.pr-tl-m p{margin-top:0.25rem;color:var(--lt-3);font-size:0.95rem}
.pr-tl-card{position:relative;grid-row:2;border-radius:var(--r-card);padding:2.2rem 2rem;background:var(--field)}
.pr-tl-card--1{grid-column:1}
.pr-tl-card--2{grid-column:2;background:var(--navy);color:#fff}
.pr-tl-card h3{font-weight:var(--w-6);font-size:1.35rem;line-height:1.25}
.pr-tl-sub{margin-top:0.35rem;color:var(--lt-3);font-size:0.95rem}
.pr-tl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem 1.5rem;flex-wrap:wrap}
.pr-tl-list{list-style:none;margin-top:1.4rem;display:grid;gap:1.05rem}
.pr-tl-list li{position:relative;padding-left:1.4rem;color:var(--lt-2);line-height:1.5}
.pr-tl-list li::before{content:"";position:absolute;left:0;top:0.55em;width:0.5rem;height:0.5rem;border-radius:50%;background:var(--peri)}
.pr-tl-list strong{color:var(--lt);font-weight:var(--w-6)}
.pr-tl-cad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem;margin-top:1.4rem}
.pr-tl-cad h4{padding-bottom:0.55rem;border-bottom:1px solid rgba(255,255,255,0.16);font-size:var(--t-small);font-weight:var(--w-6);color:var(--peri)}
.pr-tl-card--2 .pr-tl-list{margin-top:0.8rem;gap:0.7rem}
.pr-tl-card--2 .pr-tl-list li{color:rgba(255,255,255,0.8)}
.pr-tl-card--2 .pr-tl-list strong{color:#fff}
.pr-sw{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,0.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16)}
.pr-sw button{appearance:none;margin:0;border:0;padding:0.55rem 1.2rem;border-radius:999px;background:transparent;color:rgba(255,255,255,0.75);font:inherit;font-weight:var(--w-6);font-size:0.95rem;line-height:1.3;cursor:pointer;transition:background 0.25s var(--ease),color 0.25s var(--ease)}
.pr-sw button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.pr-sw button:focus-visible{outline:2px solid var(--peri);outline-offset:2px}
.pr-tl-more{display:none}
/* the package builder: options on the left, the summary sticks on the right */
.pk-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22.5rem);gap:2.4rem 3rem;align-items:start;margin-top:3rem}
.pk-opts{display:grid;gap:3.2rem}
.pk-group{border:0;padding:0;margin:0;min-width:0;display:grid;gap:0.9rem}
.pk-group-h{padding:0;font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:var(--track-h3);line-height:var(--lh-head);margin-bottom:1.1rem}   /* round 86: a legend sits outside the fieldset's grid gap, so its own margin sets the room above the cards; the whole heading is ink, no grey second half */
.pk-opt{position:relative;display:block;margin-bottom:0;font-weight:var(--w-4);border:1px solid var(--hair-strong);border-radius:var(--r-card);background:var(--field-2);padding:1.35rem 1.5rem;cursor:pointer;transition:border-color 0.3s var(--ease),box-shadow 0.3s var(--ease)}   /* round 86: Webflow's base stylesheet sets every label to bold with a 5px bottom margin; the option labels reset both (verify-launch Phase D) */
.pk-opt:hover{border-color:var(--peri-soft)}
.pk-opt:has(input:checked),.pk-opt.is-checked{border-color:var(--peri);box-shadow:0 0 0 1px var(--peri)}   /* .is-checked is set by the script, for browsers without :has() */
.pk-opt:has(input:focus-visible){outline:2px solid var(--peri);outline-offset:3px}
.pk-opt input:focus-visible~.pk-top .pk-tick{outline:2px solid var(--peri);outline-offset:2px}   /* focus fallback without :has() */
.pk-opt--base{cursor:default;border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.pk-opt--base:hover{border-color:var(--navy)}
.pk-top{display:flex;align-items:baseline;justify-content:space-between;gap:0.6rem 1rem;flex-wrap:wrap;padding-bottom:0.85rem;border-bottom:1px solid var(--hair)}
.pk-name{display:flex;align-items:center;gap:0.75rem;font-weight:var(--w-6);font-size:1.2rem}
.pk-price{font-weight:var(--w-6);font-size:1.2rem;font-variant-numeric:tabular-nums}
.pk-desc{display:block;margin-top:0.85rem;color:var(--lt-2)}
.pk-desc+.pk-desc{margin-top:0.25rem}
.pk-min{display:block;margin-top:0.6rem;font-size:var(--t-small);color:var(--lt-3)}
.pk-opt--pop{margin-top:0.7rem}   /* round 86: room for the Most popular badge riding the top edge */
.pk-pop{position:absolute;top:0;left:1.5rem;transform:translateY(-50%);padding:0.25rem 0.75rem;border-radius:999px;background:var(--navy);color:#fff;font-size:var(--t-small);font-weight:var(--w-6);line-height:1.4;white-space:nowrap}   /* white literal on navy by the dfy exception */
.pk-tag{display:inline-block;padding:0.2rem 0.65rem;border-radius:999px;background:rgba(79,155,255,0.12);color:var(--lt);font-size:var(--t-small);font-weight:var(--w-6)}
/* the selection mark: a circle for one-of choices, a rounded square for the add-on */
.pk-tick{flex:none;position:relative;width:1.25rem;height:1.25rem;border:2px solid var(--hair-strong);border-radius:50%;transition:border-color 0.3s var(--ease),background 0.3s var(--ease)}
.pk-tick--box{border-radius:0.35rem}
.pk-tick--on{border-color:var(--navy);background:var(--navy)}
.pk-opt:has(input:checked) .pk-tick,.pk-opt.is-checked .pk-tick{border-color:var(--peri);background:var(--peri)}
.pk-tick::after{content:"";position:absolute;left:0.3rem;top:0.12rem;width:0.3rem;height:0.6rem;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);opacity:0;transition:opacity 0.2s var(--ease)}
.pk-tick--on::after,.pk-opt:has(input:checked) .pk-tick::after,.pk-opt.is-checked .pk-tick::after{opacity:1}
.pk-note{font-size:var(--t-small);color:var(--lt-3)}
/* the summary card */
.pk-sum{position:sticky;top:6.5rem;display:grid;gap:0.95rem;border:1px solid var(--hair-strong);border-radius:var(--r-card);background:var(--field-2);padding:1.7rem 1.7rem}
.pk-sum-h{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:var(--track-h3)}
.pk-sum-list{list-style:none;display:grid}   /* round 86: a receipt, one labeled line per choice on the left, its price on the right */
.pk-sum-list li{padding:0.8rem 0;border-top:1px solid var(--hair)}
.pk-sum-list li:first-child{padding-top:0;border-top:0}
.pk-sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:0.3rem 1rem;margin-top:0.2rem}
.pk-sum-v{min-width:0;font-weight:var(--w-5)}
.pk-sum-p{font-weight:var(--w-5);font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-sum-due{padding-top:1rem;border-top:1px solid var(--hair)}
.pk-sum-l{display:block;font-size:var(--t-small);color:var(--lt-3)}
.pk-sum-big{display:block;margin-top:0.3rem;font-family:var(--serif);font-weight:600;font-size:2.75rem;line-height:1;letter-spacing:var(--track-serif);font-variant-numeric:tabular-nums}
.pk-sum-then{display:block;margin-top:0.3rem}
.pk-sum-total{display:flex;justify-content:space-between;gap:1rem;padding-top:0.9rem;border-top:1px solid var(--hair);font-variant-numeric:tabular-nums}
.pk-sum-total strong{font-weight:var(--w-6)}
.pk-sum-renew{font-size:var(--t-body);line-height:1.5;color:var(--lt-2)}   /* Mark's pin: larger */
.pk-sum-cta{display:flex;flex-wrap:wrap;gap:0.6rem}   /* round 86: Pay now and Book your call side by side, stacking when the card is too narrow */
.pk-sum-cta .btn{flex:1 1 auto;text-align:center;padding-left:1.1rem;padding-right:1.1rem}   /* tighter sides so both pills fit the 22.5rem card on one row */
/* phones and tablets: the summary drops under the options, and a slim bar
   keeps the running total on screen while you choose */
.pk-bar{display:none}
@media (min-width:992px) and (max-height:700px){.pk-sum{position:static}}   /* short laptop screens: a stuck card taller than the viewport would hide its own button */
/* the three reassurances under the builder: the round-82 fact cards */
.pr-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:4.5rem}
.pr-facts li{padding:1.6rem 1.6rem;border-radius:var(--r-card);background:rgba(79,155,255,0.08);border:1px solid rgba(79,155,255,0.22)}
.pr-facts h3{font-weight:var(--w-6);font-size:1.15rem;line-height:1.3}
.pr-facts p{margin-top:0.5rem;color:var(--lt-2)}
/* teams band: the platform section's navy, white literals by the dfy exception */
.pr-teams{padding:calc(var(--sec-pad) * 0.75) 0;background:var(--navy);text-align:center}
.pr-teams .lede{margin:1rem auto 0;color:rgba(255,255,255,0.78)}
.pr-teams-cta{margin-top:2rem}
@media (max-width:991px){
  /* the timeline turns vertical: the bar runs down the left, drawn by each card's ::before so it spans the card and the gaps around it */
  .pr-tl{grid-template-columns:minmax(0,1fr);row-gap:1.4rem;padding-left:3.6rem;margin-top:2.5rem}
  .pr-tl-m,.pr-tl-card{grid-row:auto;grid-column:1;justify-self:stretch;text-align:left}
  .pr-tl-m{padding-top:0;min-height:2.6rem;display:flex;flex-direction:column;justify-content:center}
  .pr-tl-dot,.pr-tl-m--3 .pr-tl-dot{left:-3.6rem;right:auto;width:2.6rem;height:2.6rem}
  .pr-tl-dot svg{width:1.1rem;height:1.1rem}
  .pr-tl-m--1::after,.pr-tl-m--2::after,.pr-tl-pill{display:none}
  .pr-tl-m h3{font-size:1.2rem}
  .pr-tl-card::before{content:"";position:absolute;left:calc(-3.6rem + 1.3rem - 2px);top:-4rem;bottom:-4rem;width:4px;border-radius:2px;background:rgba(79,155,255,0.3)}
  .pr-tl-card--2::before{background:var(--peri)}
  .pk-build{grid-template-columns:1fr}
  .pk-sum{position:static}
  .pr-facts{grid-template-columns:1fr}
  .pk-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:1rem;padding:0.85rem var(--gutter) calc(0.85rem + env(safe-area-inset-bottom));background:var(--navy);transform:translateY(110%);transition:transform 0.4s var(--ease)}
  .pk-bar.is-on{transform:none}
  .pk-bar-sum{display:flex;flex-direction:column;color:#fff;text-decoration:none}
  .pk-bar-l{font-size:var(--t-small);color:rgba(255,255,255,0.7)}
  .pk-bar-v{font-weight:var(--w-6);font-size:1.35rem;font-variant-numeric:tabular-nums}
}
@media (max-width:767px){
  .pr-tl-card{padding:1.8rem 1.4rem}
  .pr-tl-cad{grid-template-columns:1fr}
  /* phones: each card shows its first items (the Growth card keeps its switch and the monthly numbers), the rest behind Show everything */
  .pr-tl-card--1:not(.is-open) .pr-tl-list li:nth-child(n+4),
  .pr-tl-card--2:not(.is-open) .pr-tl-cad > div:nth-child(n+2){display:none}
  .pr-tl-more{display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.4rem;padding:0;border:0;background:none;font:inherit;font-weight:var(--w-6);font-size:0.95rem;color:var(--lt);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--peri)}
  .pr-tl-card--2 .pr-tl-more{color:#fff}
  .pr-tl-more::after{content:"";width:0.45rem;height:0.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .pr-tl-card.is-open .pr-tl-more::after{transform:translateY(2px) rotate(-135deg)}
}
@media (max-width:600px){
  .pk-opt{padding:1.2rem 1.15rem}
  .pk-name,.pk-price{font-size:1.1rem}
}