/* ============================================================
   PLANNR.DO — pricing, legal pages & footer
   Self-contained. All classes namespaced `pl-` so nothing here
   can collide with assets/style.css.
   ============================================================ */
:root{
  --pl-bg:#000000; --pl-bg2:#0a0a0a;
  --pl-s1:#0d0d0d; --pl-s2:#111111; --pl-s3:#161616;
  --pl-bd:#1a1a1a; --pl-bdl:#262626; --pl-bds:#3a3a3a;
  --pl-tx:#ffffff; --pl-tx2:#b8b8b8; --pl-tx3:#6e6e6e; --pl-tx4:#404040;
  --pl-ac:#ffaf01; --pl-ac-hi:#ffc23d;
  --pl-acd:rgba(255,175,1,.10); --pl-acd2:rgba(255,175,1,.18);
  --pl-ok:#34d399; --pl-no:#4a4a4a;
  --pl-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --pl-font:'Inter',-apple-system,system-ui,sans-serif;
  --pl-wrap:1160px; --pl-navh:64px;
  --pl-ease:cubic-bezier(.32,.72,0,1);
}

/* these sections must not depend on a global reset from assets/style.css */
#pl-pricing,#pl-privacy,#pl-terms,#pl-refund,.pl-foot,
#pl-pricing *,#pl-privacy *,#pl-terms *,#pl-refund *,.pl-foot *{box-sizing:border-box}

.pl-page[hidden]{display:none !important}
.pl-page{background:var(--pl-bg)}
#pl-pricing,#pl-privacy,#pl-terms,#pl-refund{
  padding-top:calc(var(--pl-navh) + 16px);
  font-family:var(--pl-font);color:var(--pl-tx);
}
.pl-wrap{max-width:var(--pl-wrap);margin:0 auto;padding:0 28px}
.pl-mono{font-family:var(--pl-mono)}

/* ---------- buttons ---------- */
.pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--pl-font);font-weight:600;font-size:14px;border-radius:9px;
  padding:12px 20px;cursor:pointer;border:1px solid transparent;
  transition:transform 200ms var(--pl-ease),background 200ms,border-color 200ms;
  white-space:nowrap;text-decoration:none}
.pl-btn:hover{transform:translateY(-1px)}
.pl-btn-primary{background:var(--pl-ac);color:#000;font-weight:700}
.pl-btn-primary:hover{background:var(--pl-ac-hi)}
.pl-btn-ghost{background:transparent;color:var(--pl-tx);border-color:var(--pl-bds)}
.pl-btn-ghost:hover{background:var(--pl-s3)}
.pl-btn-lg{padding:15px 28px;font-size:15px;border-radius:10px}

/* ---------- shared type ---------- */
.pl-kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--pl-mono);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-tx3)}
.pl-kicker .pl-dot{width:6px;height:6px;border-radius:50%;background:var(--pl-ac)}
.pl-kicker.pl-boxed{border:1px solid var(--pl-bdl);background:var(--pl-s2);
  border-radius:100px;padding:8px 16px}
.pl-h1{font-size:clamp(32px,4.6vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.06}
.pl-h2{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.pl-lead{font-size:16px;line-height:1.65;color:var(--pl-tx2)}

/* ============================================================
   PRICING
   ============================================================ */
.pl-price-hero{padding:64px 0 40px;text-align:center}
.pl-bill{display:inline-flex;align-items:center;gap:0;background:var(--pl-s2);
  border:1px solid var(--pl-bdl);border-radius:100px;padding:4px;margin-top:30px}
.pl-bill button{font-family:var(--pl-mono);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;background:transparent;border:0;color:var(--pl-tx3);
  padding:9px 20px;border-radius:100px;cursor:pointer;transition:background 200ms,color 200ms}
.pl-bill button.on{background:var(--pl-ac);color:#000;font-weight:600}
.pl-bill .pl-save{color:#34d399}
.pl-bill button.on .pl-save{color:#065f46}

.pl-plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:48px auto 0}

/* --- the crookedness fix: card content is left-aligned, not centre-aligned --- */
.pl-plan{border:1px solid var(--pl-bdl);border-radius:16px;padding:32px;
  background:var(--pl-s1);position:relative;text-align:left;
  display:flex;flex-direction:column}
.pl-plan.pl-pro{border-color:var(--pl-ac);
  box-shadow:0 0 0 1px var(--pl-ac),0 30px 80px -40px var(--pl-acd2)}
.pl-plan .pl-badge{position:absolute;top:-11px;left:32px;font-family:var(--pl-mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--pl-ac);
  color:#000;font-weight:700;padding:5px 11px;border-radius:100px}
.pl-plan .pl-pname{font-size:14px;font-family:var(--pl-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--pl-tx3)}
.pl-plan.pl-pro .pl-pname{color:var(--pl-ac)}
.pl-plan .pl-ptag{font-size:14px;color:var(--pl-tx2);margin-top:6px;min-height:42px}
.pl-plan .pl-pprice{display:flex;align-items:flex-start;gap:11px;margin:14px 0 24px;min-height:52px}
.pl-plan .pl-amt{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pl-plan .pl-pmeta{display:flex;flex-direction:column;gap:3px;padding-top:2px}
.pl-plan .pl-per{font-family:var(--pl-mono);font-size:12px;color:var(--pl-tx3);line-height:1.3}
.pl-plan .pl-psub{font-family:var(--pl-mono);font-size:12px;color:var(--pl-tx4);line-height:1.3}
.pl-plan .pl-btn{display:flex;width:100%;box-sizing:border-box}
.pl-plan .pl-pfeat{list-style:none;margin:26px 0 0;padding:0;display:flex;
  flex-direction:column;gap:12px}
.pl-plan .pl-pfeat li{display:flex;gap:10px;align-items:flex-start;font-size:14px;
  line-height:1.5;color:var(--pl-tx2);text-align:left}
.pl-plan .pl-pfeat li .pl-ck{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--pl-ac)}
.pl-plan .pl-pfeat .pl-head{font-family:var(--pl-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pl-tx4);margin-bottom:2px}
.pl-fine{font-family:var(--pl-mono);font-size:12px;color:var(--pl-tx4);
  margin-top:24px;letter-spacing:.03em}

/* ---------- comparison table ---------- */
.pl-compare{max-width:920px;margin:80px auto 0;padding:0 28px}
.pl-compare h2{text-align:center;margin-bottom:8px}
.pl-compare .pl-csub{text-align:center;color:var(--pl-tx3);font-size:14px;margin-bottom:40px}
.pl-ctable{width:100%;border-collapse:collapse}
.pl-ctable thead th{position:sticky;top:var(--pl-navh);background:var(--pl-bg);z-index:5;
  padding-top:18px;padding-bottom:18px;border-bottom:1px solid var(--pl-bdl)}
.pl-ctable th,.pl-ctable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--pl-bd)}
.pl-ctable .pl-colfeat{width:52%;font-size:14px;color:var(--pl-tx2)}
.pl-ctable th.pl-plancol{text-align:center;width:24%}
.pl-ctable td.pl-val{text-align:center;font-size:13.5px;color:var(--pl-tx2)}
.pl-ctable .pl-grp td{padding-top:26px;padding-bottom:8px;font-family:var(--pl-mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pl-tx4);border-bottom:0}
.pl-ctable .pl-plancol .pl-pn{font-size:13px;font-family:var(--pl-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--pl-tx)}
.pl-ctable .pl-plancol .pl-pp{font-size:11px;color:var(--pl-tx3);margin-top:3px;font-family:var(--pl-mono)}
.pl-ctable .pl-plancol.pl-proh .pl-pn{color:var(--pl-ac)}
.pl-icoin{width:18px;height:18px;display:inline-block;vertical-align:middle}
.pl-ck-yes{color:var(--pl-ac)}
.pl-ck-no{color:var(--pl-no)}

/* ---------- pricing FAQ ---------- */
.pl-faq{padding:96px 0 40px}
.pl-faq-head{text-align:center;margin-bottom:44px}
.pl-faq-list{max-width:760px;margin:0 auto;border-top:1px solid var(--pl-bd)}
.pl-faq-item{border-bottom:1px solid var(--pl-bd)}
.pl-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;color:var(--pl-tx);font-family:var(--pl-font);font-size:16px;
  font-weight:600;text-align:left;padding:22px 4px;cursor:pointer;line-height:1.4}
.pl-faq-q .pl-x{font-size:22px;font-weight:400;color:var(--pl-tx3);flex-shrink:0;
  transition:transform 250ms var(--pl-ease),color 200ms}
.pl-faq-item.open .pl-faq-q .pl-x{transform:rotate(45deg);color:var(--pl-ac)}
.pl-faq-a{max-height:0;overflow:hidden;transition:max-height 320ms var(--pl-ease)}
.pl-faq-a p{font-size:15px;line-height:1.7;color:var(--pl-tx2);padding:0 4px 24px;max-width:64ch}
.pl-faq-a a{color:var(--pl-ac);border-bottom:1px solid var(--pl-acd2)}

/* ============================================================
   LEGAL DOCUMENT PAGES
   ============================================================ */
.pl-doc-hero{padding:56px 0 40px;border-bottom:1px solid var(--pl-bd)}
.pl-doc-hero .pl-kicker{margin-bottom:18px}
.pl-doc-hero h1{font-size:clamp(32px,4.4vw,48px);font-weight:800;letter-spacing:-.035em}
.pl-doc-hero .pl-updated{margin-top:16px;font-family:var(--pl-mono);font-size:12.5px;
  color:var(--pl-tx3);letter-spacing:.03em}
.pl-doc-wrap{display:grid;grid-template-columns:220px 1fr;gap:48px;max-width:1000px;
  margin:0 auto;padding:56px 28px 100px;align-items:start}
.pl-doc-toc{position:sticky;top:calc(var(--pl-navh) + 28px)}
.pl-doc-toc .pl-tt{font-family:var(--pl-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pl-tx4);margin-bottom:14px}
.pl-doc-toc a{display:block;font-size:13px;color:var(--pl-tx3);padding:6px 0;
  border-left:2px solid transparent;padding-left:12px;margin-left:-12px;
  transition:color 200ms,border-color 200ms;text-decoration:none}
.pl-doc-toc a:hover,.pl-doc-toc a.on{color:var(--pl-tx);border-color:var(--pl-ac)}
.pl-doc-body h2{font-size:22px;font-weight:700;margin:44px 0 14px;letter-spacing:-.02em;
  scroll-margin-top:calc(var(--pl-navh) + 20px)}
.pl-doc-body h2:first-child{margin-top:0}
.pl-doc-body h3{font-size:16px;font-weight:600;margin:26px 0 10px;color:var(--pl-tx)}
.pl-doc-body p{font-size:15px;line-height:1.72;color:var(--pl-tx2);margin-bottom:14px}
.pl-doc-body ul{margin:0 0 16px;padding-left:22px}
.pl-doc-body li{font-size:15px;line-height:1.7;color:var(--pl-tx2);margin-bottom:8px}
.pl-doc-body strong{color:var(--pl-tx)}
.pl-doc-body a{color:var(--pl-ac);border-bottom:1px solid var(--pl-acd2);text-decoration:none}
.pl-doc-body .pl-lede{font-size:16.5px;color:var(--pl-tx);line-height:1.7;margin-bottom:24px}

/* ============================================================
   FOOTER
   ============================================================ */
.pl-foot{border-top:1px solid var(--pl-bd);padding:56px 0 32px;background:var(--pl-bg2);
  font-family:var(--pl-font)}
.pl-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.pl-foot-brand .pl-brand{display:inline-block;margin-bottom:12px;font-size:21px;
  font-weight:800;letter-spacing:-.03em;color:var(--pl-tx);text-decoration:none}
.pl-foot-brand .pl-brand .pl-d{color:var(--pl-ac)}
.pl-foot-brand p{font-size:13.5px;color:var(--pl-tx3);max-width:260px;line-height:1.6}
.pl-foot-col h4,.pl-foot-col .pl-fh{font-family:var(--pl-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pl-tx4);margin-bottom:15px}
.pl-foot-col a{display:block;font-size:14px;color:var(--pl-tx2);padding:6px 0;
  transition:color 200ms;text-decoration:none}
.pl-foot-col a:hover{color:var(--pl-tx)}
.pl-foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:48px;
  padding-top:24px;border-top:1px solid var(--pl-bd);flex-wrap:wrap;gap:14px}
.pl-foot-bottom .pl-fine2{font-size:12.5px;color:var(--pl-tx4);font-family:var(--pl-mono);
  letter-spacing:.02em}
.pl-foot-bottom .pl-legal{display:flex;gap:20px}
.pl-foot-bottom .pl-legal a{font-size:12.5px;color:var(--pl-tx3);text-decoration:none}
.pl-foot-bottom .pl-legal a:hover{color:var(--pl-tx)}

/* ============================================================
   NAV — dense mega-menu bar
   Sits inside the existing .nav#nav shell so site.js keeps
   toggling .scrolled. Everything else is namespaced pl-.
   ============================================================ */
.pl-nav-mid{display:flex;align-items:center;gap:4px}
.pl-navitem{position:relative}
.pl-navtrig,.pl-navlink{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--pl-font);
  font-size:15px;font-weight:500;color:var(--pl-tx3);background:none;border:0;
  padding:9px 14px;border-radius:9px;cursor:pointer;text-decoration:none;
  transition:color .2s,background .2s;white-space:nowrap}
.pl-navtrig:hover,.pl-navlink:hover,
.pl-navitem.open .pl-navtrig{color:var(--pl-tx);background:rgba(255,255,255,.05)}
.pl-navtrig .pl-chev{width:11px;height:11px;transition:transform .25s var(--pl-ease);opacity:.7}
.pl-navitem.open .pl-chev{transform:rotate(180deg)}

/* ---------- panel ---------- */
.pl-mega{
  position:absolute;top:calc(100% + 14px);left:-8px;z-index:120;
  background:#0b0b0b;border:1px solid var(--pl-bdl);border-radius:16px;
  box-shadow:0 32px 80px -24px rgba(0,0,0,.9);padding:22px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s var(--pl-ease),transform .18s var(--pl-ease),visibility .18s}
.pl-navitem.open .pl-mega{opacity:1;visibility:visible;transform:translateY(0)}
/* hover bridge so the pointer can cross the gap */
.pl-mega::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.pl-mega-inner{display:flex;gap:26px}
.pl-mega-col{min-width:248px}
.pl-mega-col + .pl-mega-col{padding-left:26px;border-left:1px solid var(--pl-bd)}
.pl-mega-h{font-family:var(--pl-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pl-tx4);padding:0 10px;margin-bottom:10px}
.pl-mi{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:10px;
  text-decoration:none;transition:background .16s}
.pl-mi:hover{background:rgba(255,255,255,.05)}
.pl-mi-ico{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--pl-s3);color:var(--pl-ac)}
.pl-mi span.pl-mi-ico{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--pl-s3);color:var(--pl-ac);margin-top:0;font-size:0}
.pl-mi-ico svg{width:16px;height:16px}
.pl-mi b{display:block;font-size:14px;font-weight:600;color:var(--pl-tx);line-height:1.35}
.pl-mi span{display:block;font-size:12.5px;color:var(--pl-tx3);line-height:1.45;margin-top:1px}

/* right-hand promo rail */
.pl-mega-side{width:262px;border-radius:12px;background:var(--pl-s1);
  border:1px solid var(--pl-bd);padding:18px;display:flex;flex-direction:column}
.pl-mega-side .pl-k{font-family:var(--pl-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pl-ac);margin-bottom:9px}
.pl-mega-side h4{font-size:15px;font-weight:700;color:var(--pl-tx);margin-bottom:6px;line-height:1.3}
.pl-mega-side p{font-size:12.5px;color:var(--pl-tx3);line-height:1.5;margin-bottom:14px}
.pl-mega-side .pl-btn{width:100%;font-size:13px;padding:10px 14px}

/* compact panel (Company) */
.pl-mega.pl-sm{padding:12px}
.pl-mega.pl-sm .pl-mega-col{min-width:252px}

.pl-login{font-size:14.5px;font-weight:500;color:var(--pl-tx3);text-decoration:none;
  padding:8px 10px;border-radius:8px;transition:color .2s}
.pl-login:hover{color:var(--pl-tx)}

/* ---------- mobile ---------- */
.pl-mm-group{margin-bottom:6px}
.pl-mm-h{font-family:var(--pl-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pl-tx4);padding:14px 0 6px}
#mobileMenu .pl-mm-link{display:flex;align-items:center;gap:11px;padding:11px 0;
  font-size:16px;color:var(--pl-tx2);border-bottom:1px solid var(--pl-bd);text-decoration:none}
#mobileMenu .pl-mm-link .pl-mi-ico{width:26px;height:26px}
#mobileMenu .pl-mm-link .pl-mi-ico svg{width:14px;height:14px}

@media(max-width:1080px){
  .pl-nav-mid,.nav-right .pl-login{display:none}
}
@media(max-width:900px){
  .nav-right{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pl-mega,.pl-chev{transition:none}
}
.pl-navtrig:focus-visible,.pl-navlink:focus-visible,
.pl-mi:focus-visible,.pl-login:focus-visible{outline:2px solid var(--pl-ac);outline-offset:2px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .pl-plans{grid-template-columns:1fr;max-width:440px}
  .pl-plan .pl-ptag{min-height:0}
  .pl-foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .pl-doc-wrap{grid-template-columns:1fr;gap:0;padding-top:40px}
  .pl-doc-toc{display:none}
  .pl-compare{overflow-x:auto}
  .pl-ctable{min-width:560px}
}
@media(max-width:600px){
  .pl-foot-grid{grid-template-columns:1fr;gap:26px}
  .pl-price-hero{padding:40px 0 24px}
  .pl-faq{padding:64px 0 24px}
  .pl-compare{margin-top:56px}
}
@media(prefers-reduced-motion:reduce){
  .pl-btn:hover{transform:none}
  .pl-faq-a,.pl-faq-q .pl-x{transition:none}
}
.pl-btn:focus-visible,.pl-faq-q:focus-visible,.pl-bill button:focus-visible,
.pl-doc-toc a:focus-visible,.pl-foot-col a:focus-visible{
  outline:2px solid var(--pl-ac);outline-offset:3px;border-radius:4px}