/* Marketing extras for /plans.html — tokens come from styles.css */
body.plans-page{
  --pp-font:var(--font);
  --pp-display:var(--font-display);
  --pp-ink:var(--text);
  --pp-paper:var(--bg);
  --pp-panel:var(--panel);
  --pp-line:var(--line);
  --pp-muted:var(--muted);
  --pp-blue:var(--accent);
  --pp-blue-ink:var(--accent-ink);
  --pp-teal:var(--ok);
  --pp-warn:var(--warn);
  --pp-shadow:var(--shadow);
  font-family:var(--pp-font);
  background:var(--pp-paper);
  color:var(--pp-ink);
  min-height:100%;
  overflow-x:hidden;
}

body.plans-page header:not(.pp-header),
body.plans-page .page{display:none !important}

.pp-atmos{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.pp-atmos__grid{
  position:absolute;inset:-10%;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 20%, transparent 75%);
  animation:pp-drift 28s linear infinite;
}
.pp-atmos__glow{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
}
.pp-atmos__glow--a{
  width:42vw;height:42vw;max-width:520px;max-height:520px;
  left:-8%;top:-12%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
  animation:pp-pulse 9s ease-in-out infinite;
}
.pp-atmos__glow--b{
  width:36vw;height:36vw;max-width:440px;max-height:440px;
  right:-6%;top:18%;
  background:radial-gradient(circle, color-mix(in srgb, var(--ok) 22%, transparent), transparent 70%);
  animation:pp-pulse 11s ease-in-out infinite reverse;
}
@keyframes pp-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-48px,-48px,0)}
}
@keyframes pp-pulse{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.08);opacity:.75}
}
@keyframes pp-rise{
  from{opacity:0;transform:translateY(18px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}

.pp-header,.pp-hero,main > .pp-section,.pp-callback,.pp-foot{
  position:relative;z-index:1;
}

.pp-hero{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,56px);align-items:end;
  padding:clamp(36px,7vw,72px) 16px clamp(48px,8vw,80px);
  max-width:none;width:100%;margin:0 auto;
}
.pp-hero__copy{animation:pp-rise .7s cubic-bezier(.2,.8,.2,1) both}
.pp-brand{
  font-family:var(--pp-display);
  font-size:clamp(2.4rem,7vw,4.6rem);
  font-weight:700;letter-spacing:-.04em;line-height:.95;
  margin:0 0 18px;max-width:11ch;
}
.pp-hero h1{
  font-family:var(--pp-font);
  font-size:clamp(1.25rem,2.4vw,1.65rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.25;
  margin:0 0 12px;max-width:22ch;color:var(--pp-ink);
}
.pp-lead{
  margin:0 0 24px;color:var(--pp-muted);font-size:16px;line-height:1.55;max-width:38ch;
}
.pp-hero__cta{display:flex;flex-wrap:wrap;gap:10px}
.pp-hero__visual{animation:pp-rise .85s .12s cubic-bezier(.2,.8,.2,1) both}
.pp-viz{
  position:relative;
  border:1px solid var(--pp-line);
  background:linear-gradient(165deg, color-mix(in srgb, var(--pp-panel) 92%, var(--pp-blue)), var(--pp-panel));
  border-radius:28px;padding:22px 22px 18px;box-shadow:var(--pp-shadow);
  display:grid;gap:10px;min-height:280px;
}
.pp-viz::before{
  content:"";position:absolute;inset:auto -20% -30% auto;width:55%;height:55%;
  background:radial-gradient(circle, color-mix(in srgb, var(--pp-blue) 25%, transparent), transparent 70%);
  pointer-events:none;
}
.pp-viz__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--pp-muted)}
.pp-viz__row b{font-family:var(--pp-display);font-size:18px;color:var(--pp-ink);letter-spacing:-.03em}
.pp-viz__bar{
  height:10px;border-radius:999px;background:color-mix(in srgb, var(--pp-ink) 8%, transparent);overflow:hidden;
}
.pp-viz__bar i{
  display:block;height:100%;width:var(--w);border-radius:inherit;
  background:linear-gradient(90deg, var(--pp-blue), color-mix(in srgb, var(--pp-blue) 55%, var(--pp-teal)));
  transform-origin:left center;
  animation:pp-bar 1.1s .35s cubic-bezier(.2,.8,.2,1) both;
}
.pp-viz__bar--warn i{background:linear-gradient(90deg, var(--pp-warn), #e0a23a)}
@keyframes pp-bar{from{transform:scaleX(.15)} to{transform:scaleX(1)}}
.pp-viz__tag{
  margin-top:auto;justify-self:start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--pp-teal);padding:6px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--pp-teal) 12%, transparent);
}

.pp-section{
  max-width:none;width:100%;margin:0 auto;
  padding:0 16px clamp(48px,7vw,72px);
}
.pp-section--tight{padding-bottom:clamp(28px,5vw,40px)}
.pp-section__head{margin-bottom:22px;max-width:42ch}
.pp-section__head h2{
  font-family:var(--pp-display);font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:-.03em;margin:0 0 8px;
}
.pp-section__head p{margin:0;color:var(--pp-muted);font-size:15px}

.pp-tabs{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:999px;
  border:1px solid var(--pp-line);background:color-mix(in srgb, var(--pp-panel) 70%, transparent);
}
.pp-tab{
  border:0;background:transparent;color:var(--pp-muted);border-radius:999px;
  padding:10px 16px;font:600 13px/1 var(--pp-font);cursor:pointer;
}
.pp-tab.is-active{
  background:var(--pp-panel);color:var(--pp-ink);box-shadow:0 1px 4px rgba(16,20,28,.08);
}

.pp-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.pp-cards[data-tier="combo"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px}
.pp-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:22px 20px 18px;border-radius:24px;
  background:var(--pp-panel);border:1px solid var(--pp-line);
  box-shadow:0 1px 2px rgba(16,20,28,.04);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .25s ease;
}
.pp-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--pp-blue) 35%, var(--pp-line));
  box-shadow:var(--pp-shadow);
}
.pp-card.is-current{
  border-color:var(--pp-blue);
  box-shadow:0 0 0 1px var(--pp-blue), var(--pp-shadow);
}
.pp-card.is-featured{
  background:linear-gradient(180deg, color-mix(in srgb, var(--pp-blue) 8%, var(--pp-panel)), var(--pp-panel));
}
.pp-card.is-combo{
  background:linear-gradient(180deg, color-mix(in srgb, var(--pp-teal) 10%, var(--pp-panel)), var(--pp-panel));
}
.pp-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pp-card__name{
  font-family:var(--pp-display);font-size:1.15rem;font-weight:600;letter-spacing:-.03em;margin:0;
}
.pp-card__badge{
  flex:none;font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--pp-teal) 14%, transparent);color:var(--pp-teal);
}
.pp-card__you{
  font-size:11px;font-weight:700;color:var(--pp-blue);
  background:color-mix(in srgb, var(--pp-blue) 12%, transparent);
  padding:5px 8px;border-radius:999px;
}
.pp-card__price{
  font-family:var(--pp-display);font-size:clamp(1.6rem,3vw,2rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;margin:2px 0 0;
}
.pp-card__price small{font-family:var(--pp-font);font-size:13px;font-weight:600;color:var(--pp-muted);margin-left:4px}
.pp-card__old{
  display:inline-block;margin-right:6px;font-size:14px;color:var(--pp-muted);
  text-decoration:line-through;font-family:var(--pp-font);font-weight:600;
}
.pp-card__list{margin:0;padding:0;list-style:none;display:grid;gap:8px;flex:1}
.pp-card__list li{
  position:relative;padding-left:18px;color:var(--pp-muted);font-size:13.5px;line-height:1.4;
}
.pp-card__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--pp-blue);
}
.pp-card.is-combo .pp-card__list li::before{background:var(--pp-teal)}
.pp-card .pp-btn{margin-top:6px;width:100%}

.pp-points{
  display:grid;grid-template-columns:1.2fr .8fr;gap:18px 28px;
  border-top:1px solid var(--pp-line);padding-top:8px;
}
.pp-point{padding:16px 0;border-bottom:1px solid var(--pp-line)}
.pp-point:nth-child(odd):last-child,
.pp-point:nth-child(even):last-child{border-bottom:0}
.pp-point b{
  display:block;font-family:var(--pp-display);font-size:15px;font-weight:600;
  letter-spacing:-.02em;margin-bottom:6px;
}
.pp-point p{margin:0;color:var(--pp-muted);font-size:14px;line-height:1.5;max-width:48ch}

.pp-compare-shell{
  overflow:auto;border:1px solid var(--pp-line);border-radius:20px;background:var(--pp-panel);
}
.pp-compare{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.pp-compare th,.pp-compare td{
  padding:12px 14px;border-bottom:1px solid var(--pp-line);text-align:left;vertical-align:middle;
}
.pp-compare thead th{
  font-family:var(--pp-display);font-size:12px;font-weight:600;letter-spacing:-.02em;
  background:color-mix(in srgb, var(--pp-ink) 3%, var(--pp-panel));
  position:sticky;top:0;z-index:1;
}
.pp-compare th:first-child,.pp-compare td:first-child{
  position:sticky;left:0;z-index:2;background:var(--pp-panel);font-weight:600;
}
.pp-compare thead th:first-child{z-index:3;background:color-mix(in srgb, var(--pp-ink) 3%, var(--pp-panel))}
.pp-compare tbody tr:last-child td{border-bottom:0}
.pp-compare .num{text-align:center;font-variant-numeric:tabular-nums}
.pp-yes{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:24px;padding:0 8px;border-radius:999px;
  background:color-mix(in srgb, var(--pp-teal) 14%, transparent);color:var(--pp-teal);font-weight:700;font-size:11px;
}
.pp-no{color:var(--pp-muted)}
.pp-soft{
  display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;
  background:color-mix(in srgb, var(--pp-warn) 14%, transparent);color:var(--pp-warn);
}

.pp-callback{
  margin:0 clamp(12px,3vw,28px) clamp(28px,5vw,48px);
  border-radius:32px;overflow:hidden;
  background:
    radial-gradient(900px 420px at 10% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%),
    radial-gradient(700px 380px at 90% 100%, color-mix(in srgb, var(--ok) 35%, transparent), transparent 50%),
    #0f1724;
  color:#eef2f8;
  box-shadow:var(--pp-shadow);
}
.pp-callback__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  padding:clamp(28px,5vw,48px) 16px;
  max-width:none;width:100%;margin:0 auto;
}
.pp-callback__copy h2{
  font-family:var(--pp-display);font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:-.03em;margin:0 0 12px;max-width:14ch;color:#fff;
}
.pp-callback__copy p{margin:0;color:rgba(238,242,248,.72);font-size:15px;max-width:34ch;line-height:1.55}
.pp-form{display:grid;gap:12px;align-content:start}
.pp-field{display:grid;gap:6px;font-size:13px;font-weight:600;color:rgba(238,242,248,.78)}
.pp-field input{
  margin:0;border:1px solid rgba(238,242,248,.16);background:rgba(255,255,255,.06);
  color:#fff;border-radius:14px;padding:12px 14px;min-height:46px;
}
.pp-field input::placeholder{color:rgba(238,242,248,.4)}
.pp-check{
  display:flex;align-items:flex-start;gap:10px;font-size:12.5px;font-weight:500;
  color:rgba(238,242,248,.7);cursor:pointer;
}
.pp-check input{width:auto;margin:2px 0 0;accent-color:var(--pp-blue)}
.pp-callback .pp-status{color:rgba(238,242,248,.7)}
.pp-callback .pp-status.ok{color:#6dE0b3}
.pp-callback .pp-status.err{color:#ff8f8f}
.pp-callback .pp-btn--primary{background:#fff;color:#0f1724}

.pp-foot{
  display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 20px 36px;color:var(--pp-muted);font-size:13px;
}
.pp-foot a{color:var(--pp-muted);font-weight:600}
.pp-foot a:hover{color:var(--pp-ink)}

@media (max-width:960px){
  .pp-hero{grid-template-columns:1fr;align-items:start}
  .pp-hero__visual{max-width:420px}
  .pp-cards{grid-template-columns:1fr}
  .pp-cards[data-tier="combo"]{grid-template-columns:1fr;max-width:none}
  .pp-points{grid-template-columns:1fr}
  .pp-callback__inner{grid-template-columns:1fr}
}
@media (max-width:720px){
  body.plans-page .pp-nav a:not([aria-current="page"]):not([href="/#overview"]):not([href="/#products"]):not([href="/#settings"]){display:none}
  .pp-brand{max-width:none}
  .pp-tabs{width:100%}
  .pp-tab{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .pp-atmos__grid,.pp-atmos__glow,.pp-hero__copy,.pp-hero__visual,.pp-viz__bar i{animation:none !important}
}