/* /vps-checkout: /classic with the checkout block in place of the plans (tokens from /classic/styles.css).
   Plans and payment sit on one dark "stage", the page's conversion zone: step 1 on the forest, step 2 in a light panel. */

/* ---------- the stage ---------- */
#checkout{scroll-margin-top:24px}
.co-stage{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,5vw,64px);border-radius:calc(var(--r) + 12px);color:var(--on-forest);
  background:radial-gradient(70% 55% at 88% 0,#3a5a12 0,transparent 70%),radial-gradient(60% 45% at 0 100%,#1f300d 0,transparent 70%),var(--forest);
  box-shadow:0 40px 80px -40px rgb(22 35 15 / .6),inset 0 1px 0 rgb(255 255 255 / .06)}
/* faint grid, like a server room floor plan; fades out from the top right */
.co-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgb(255 255 255 / .045) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .045) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(75% 60% at 80% 0,#000,transparent);mask-image:radial-gradient(75% 60% at 80% 0,#000,transparent)}
@media (prefers-color-scheme:dark){.co-stage{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07)}}

.co-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-bottom:40px}
.co-head h2{color:var(--on-forest)}
.co-head .sub{color:var(--on-forest-muted)}
.co-step{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14.5px;font-weight:650;color:var(--lime)}
.co-step span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--on-lime);font-size:13.5px;font-weight:700}
.co-trust{display:grid;gap:10px}
.co-trust li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;white-space:nowrap}
.co-trust svg{color:var(--lime)}

.co-pays{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:26px;color:var(--on-forest-muted);font-size:14.5px}
.co-pays li{display:inline-flex;align-items:center;gap:8px}
.co-pays svg{color:var(--lime)}
.co-legal{display:flex;flex-wrap:wrap;gap:8px 24px}

/* ---------- checkout block: variables ---------- */
.zc{
  --zc-font:inherit;
  --zc-ink:var(--ink);--zc-text:var(--ink);--zc-muted:var(--muted);--zc-faint:var(--muted);
  --zc-surface:var(--surface);--zc-input-bg:var(--bg);
  --zc-line:var(--line);--zc-line-strong:color-mix(in srgb,var(--ink) 22%,var(--line));
  --zc-accent:var(--lime);--zc-accent-hover:#b2e63b;--zc-on-accent:var(--on-lime);--zc-accent-text:var(--lime-ink);
  --zc-accent-soft:color-mix(in srgb,var(--lime) 22%,transparent);--zc-accent-line:var(--lime-deep);--zc-glow:rgb(90 130 0 / .45);
  --zc-badge-bg:var(--lime);--zc-badge-ink:var(--on-lime);
  --zc-chip-bg:var(--tint);--zc-chip-ink:var(--ink);
  --zc-radius:var(--r);--zc-radius-input:14px;
  --zc-shadow:none;--zc-shadow-hover:none;--zc-plan-shadow:none;
  line-height:1.55;
}
.zc-status{padding:40px 0;text-align:left;color:var(--on-forest-muted)}
.zc-status .zc-link{color:var(--lime)}

/* ---------- step 1: plans on the forest; the chosen one lights up lime ---------- */
.zc-plans{gap:16px;max-width:520px;margin:0}
@media (min-width:768px){.zc-plans{max-width:none;align-items:stretch}}
.zc-plan{padding:30px;color:var(--on-forest);background:rgb(255 255 255 / .045);border:1px solid rgb(255 255 255 / .11);
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.zc-plan:hover{background:rgb(255 255 255 / .075);border-color:rgb(255 255 255 / .2);box-shadow:none}
.zc-plan--selected,.zc-plan--selected:hover{background:var(--lime);border-color:var(--lime);color:var(--on-lime);
  box-shadow:0 30px 60px -28px rgb(163 216 44 / .55),inset 0 1px 0 rgb(255 255 255 / .5)}
@media (min-width:768px){.zc-plan--selected{transform:translateY(-10px)}}
.zc-plan__head{margin-bottom:18px;min-height:28px}
.zc-plan__name,.zc-plan--selected .zc-plan__name{color:inherit;font-size:21px;font-weight:650;letter-spacing:-.015em}
.zc-badge{padding:5px 12px;border:0;font-size:13px;font-weight:650;background:rgb(255 255 255 / .1);color:var(--on-forest)}
.zc-badge--accent{background:var(--lime);color:var(--on-lime)}
.zc-plan--selected .zc-badge{background:var(--forest);color:var(--lime)}
.zc-plan__price{min-height:84px;margin-bottom:20px;gap:6px}
.zc-plan__amount{color:inherit;font-size:clamp(38px,3.8vw,50px);font-weight:700;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.zc-plan--selected .zc-plan__amount{color:var(--on-lime)}
.zc-plan__old{font-size:15px;color:var(--on-forest-muted)}
.zc-plan--selected .zc-plan__old{color:#3f5514}
.zc-plan__note{margin:-8px 0 20px;font-size:15px;font-weight:600;color:var(--lime)}
.zc-plan--selected .zc-plan__note{color:var(--forest)}
.zc-perks{gap:10px;margin-bottom:28px;font-size:15.5px;color:inherit}
.zc-plan--selected .zc-perks{color:var(--on-lime)}
.zc-perks__icon{color:var(--lime)}
.zc-plan--selected .zc-perks__icon{color:var(--forest)}

/* buttons: the /classic pill */
.zc-btn{min-height:50px;padding:0 24px;font-size:16px;font-weight:650;box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),0 10px 24px -12px var(--zc-glow);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .2s ease,color .2s ease}
.zc-btn:hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),0 10px 24px -12px var(--zc-glow)}
.zc-btn:active{transform:scale(.98)}
.zc-btn--lg{min-height:58px;font-size:17px}
.zc-plan .zc-btn{background:transparent;color:var(--on-forest);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .55)}
.zc-plan--selected .zc-btn{background:var(--forest);color:var(--lime);box-shadow:0 12px 24px -14px rgb(22 35 15 / .9)}
@media (hover:hover) and (pointer:fine){
  .zc-btn:hover{transform:translateY(-2px)}
  .zc-plan:not(.zc-plan--selected) .zc-btn:hover{background:var(--on-forest);color:var(--forest)}
  .zc-plan--selected .zc-btn:hover{background:#22351a}
}
.zc-btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* ---------- step 2: email and payment in a light panel ---------- */
.zc-section+.zc-section{margin-top:clamp(40px,5vw,56px)}
.zc-section--pay{position:relative;padding:clamp(20px,3.4vw,40px);border-radius:calc(var(--r) + 6px);background:var(--tint);color:var(--ink);
  box-shadow:0 30px 60px -36px rgb(0 0 0 / .55)}
.zc-section--pay .zc-title{margin-bottom:28px;color:var(--ink);font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.08;text-align:left}
.zc-section--pay .zc-title::before{content:"2";display:inline-grid;place-items:center;width:34px;height:34px;margin-right:14px;vertical-align:.22em;border-radius:50%;
  background:var(--forest);color:var(--lime);font-size:16px;letter-spacing:0}
.zc-pay{gap:16px;max-width:none;margin:0}
@media (min-width:900px){.zc-pay{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.zc-card{background:var(--surface);border-color:var(--line)}
@media (min-width:640px){.zc-card{padding:30px}}
.zc-order__title{font-size:21px;font-weight:650;letter-spacing:-.015em}
.zc-order__rows{font-size:15px}
.zc-order__row--total dd{color:var(--ink);font-size:32px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zc-order__change{font-size:14.5px}
.zc-field__label{font-size:14.5px;color:var(--ink)}
.zc-field__input{min-height:52px;padding:12px 16px;border-color:var(--line)}
.zc-field__input:focus{border-color:var(--lime-deep);box-shadow:0 0 0 4px var(--zc-accent-soft)}
.zc-field__hint{margin-top:6px;font-size:13.5px;color:var(--muted)}
.zc-methods{display:grid;gap:12px}
.zc-method{padding:22px;transition:border-color .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
@media (min-width:640px){.zc-method{padding:24px 26px}}
@media (hover:hover) and (pointer:fine){.zc-method:hover{border-color:var(--lime-deep)}}
.zc-method__title{font-size:18px;font-weight:650;letter-spacing:-.01em}
.zc-method__note{color:var(--muted);font-size:14.5px}
.zc-legal{margin-top:20px;font-size:14px;color:var(--muted);text-align:center}
.zc-legal a{color:var(--ink);text-underline-offset:3px}

/* the block scrolls to the payment part: keep it clear of the sticky header */
.zc-section--pay,.zc-pay{scroll-margin-top:88px}

@media (max-width:860px){.co-head{grid-template-columns:1fr;align-items:start}.co-trust{display:flex;flex-wrap:wrap;gap:10px 20px}}
@media (max-width:620px){
  .co-stage{margin-inline:-12px;padding:28px 14px 24px;border-radius:calc(var(--r) + 4px)}
  .co-head{margin-bottom:28px;gap:18px}
  .zc-plan{padding:24px}
  .zc-section--pay{padding:20px 10px 16px;margin-inline:-4px}
  .zc-section--pay .zc-title{padding-inline:6px}
  .zc-pay .zc-card{padding:20px 18px}
  .co-pays{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .zc-plan,.zc-btn,.zc-method{transition:none}
  .zc-plan--selected{transform:none}
}
@media (prefers-color-scheme:dark){.zc-section--pay .zc-title::before{background:var(--lime);color:var(--on-lime)}}
/* the block resets margins with ".zc p/ul/h2"; restate ours with the same weight */
.zc .zc-perks{margin-bottom:28px}
.zc .zc-plan__note{margin:-8px 0 18px}
.zc .zc-field__hint{margin-top:6px}
.zc .zc-legal{margin-top:20px}
.zc .zc-section--pay .zc-title{margin-bottom:28px}
/* A form error is printed twice by the block: under the fields and again under the pay buttons (meant for the
   two-column desktop layout). When the fields already show it, hide the second copy from view only: it is the one
   with role="alert", so screen readers still announce it. Server errors appear only under the buttons and stay visible. */
.zc-pay:has(.zc-order .zc-error) .zc-methods > .zc-error{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Proxy by Zoog wordmark */
.logo{text-decoration:none}.logo__word{display:block;height:40px;width:auto}@media (max-width:620px){.logo__word{height:34px}}
.co-anchor{display:none}