/* Pricing page — builds on css/home.css (#hm / #hm2 scope, hm-* components). */

/* hero: shorter than the home hero */
:is(#hm,#hm2) .pr-hero{padding-bottom:40px}
:is(#hm,#hm2) .pr-hero::after{top:70%;height:420px}
:is(#hm,#hm2) .pr-hero h1{font-size:clamp(2.6rem,6.4vw,4.8rem) !important}

/* billing toggle */
:is(#hm,#hm2) .pr-toggle{display:inline-flex;gap:3px;padding:4px;border-radius:12px;background:#f4f4f5;border:1px solid var(--hm-line);margin-bottom:20px}
:is(#hm,#hm2) .pr-toggle button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--hm-muted);transition:background .2s,color .2s,box-shadow .2s}
:is(#hm,#hm2) .pr-toggle button[aria-checked="true"]{background:#fff;color:var(--hm-ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
:is(#hm,#hm2) .pr-toggle button:focus-visible{outline:2px solid var(--hm-green);outline-offset:2px}
:is(#hm,#hm2) .pr-toggle span{font:500 .66rem var(--hm-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--hm-green);background:var(--hm-green-bg);border:1px solid var(--hm-green-bd);padding:2px 6px;border-radius:5px}

/* plans grid */
:is(#hm,#hm2) .pr-plans-sec{padding:0 0 24px;position:relative;z-index:2}
:is(#hm,#hm2) .pr-plans{position:relative;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--hm-line);border-radius:18px 18px 0 0;box-shadow:0 40px 80px -50px rgba(0,0,0,.25)}
:is(#hm,#hm2) .pr-plan{position:relative;display:flex;flex-direction:column;padding:28px 24px 30px;border-right:1px solid var(--hm-line);min-width:0}
:is(#hm,#hm2) .pr-plan:last-child{border-right:0}
:is(#hm,#hm2) .pr-plan--pro{background:linear-gradient(180deg,#f0fdf4,#fff 45%);box-shadow:inset 0 2px 0 var(--hm-green)}
:is(#hm,#hm2) .pr-plan-top{display:flex;justify-content:space-between;align-items:center;min-height:24px;margin-bottom:14px}
:is(#hm,#hm2) .pr-plan-top .hm-mono{font-size:.7rem;color:var(--hm-faint)}
:is(#hm,#hm2) .pr-plan--pro .pr-plan-top .hm-mono{color:var(--hm-green)}
:is(#hm,#hm2) .pr-pop{font:500 .64rem var(--hm-mono);text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--hm-green);padding:4px 8px;border-radius:6px}
:is(#hm,#hm2) .pr-plan h2{font-size:1.35rem;font-weight:600;letter-spacing:-.025em;color:var(--hm-ink)}
:is(#hm,#hm2) .pr-desc{font-size:.86rem;line-height:1.5;color:var(--hm-muted);margin-top:6px;min-height:40px}
:is(#hm,#hm2) .pr-price{display:flex;align-items:baseline;gap:3px;margin-top:22px;color:var(--hm-ink)}
:is(#hm,#hm2) .pr-price small{font-size:1.15rem;font-weight:600;align-self:flex-start;margin-top:6px}
:is(#hm,#hm2) .pr-price b{font-size:2.6rem;font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
:is(#hm,#hm2) .pr-price em{font-style:normal;font-size:.9rem;color:var(--hm-faint);margin-left:2px}
:is(#hm,#hm2) .pr-bill{font:500 .68rem var(--hm-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--hm-faint);margin-top:8px;min-height:16px}
:is(#hm,#hm2) .pr-plan .hm-btn,:is(#hm,#hm2) .pr-ent .hm-btn{margin-top:20px;width:100%;height:44px}
:is(#hm,#hm2) .pr-feats{display:flex;flex-direction:column;gap:11px;margin-top:24px;padding-top:22px;border-top:1px dashed var(--hm-line)}
:is(#hm,#hm2) .pr-feats li{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;line-height:1.4;color:var(--hm-text)}
:is(#hm,#hm2) .pr-feats li svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;fill:none;stroke:var(--hm-green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
:is(#hm,#hm2) .pr-feats li strong{font-weight:600;color:var(--hm-ink)}
:is(#hm,#hm2) .pr-feats li.off{color:var(--hm-faint)}
:is(#hm,#hm2) .pr-feats li.off .pr-no{width:16px;text-align:center;flex-shrink:0}

/* enterprise */
:is(#hm,#hm2) .pr-ent{position:relative;display:grid;grid-template-columns:1fr 1.25fr;background:#0a0a0a;color:#fff;border:1px solid #0a0a0a;border-radius:0 0 18px 18px;overflow:visible;isolation:isolate}
:is(#hm,#hm2) .pr-ent::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(60% 90% at 0% 0%,rgba(74,222,128,.16),transparent 70%),linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px}
:is(#hm,#hm2) .pr-ent-l{padding:34px 32px;border-right:1px solid #27272a;display:flex;flex-direction:column;align-items:flex-start}
:is(#hm,#hm2) .pr-ent-l .hm-mono,:is(#hm,#hm2) .pr-ent-r .hm-mono{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#4ade80}
:is(#hm,#hm2) .pr-ent h2{font-size:1.8rem;font-weight:600;letter-spacing:-.03em;margin-top:10px;color:#fff}
:is(#hm,#hm2) .pr-ent-l p{font-size:.92rem;line-height:1.6;color:#a1a1aa;margin-top:10px;max-width:440px}
:is(#hm,#hm2) .pr-ent .pr-price{color:#fff}
:is(#hm,#hm2) .pr-ent .pr-price em{color:#71717a}
:is(#hm,#hm2) .pr-ent .hm-btn{width:auto;padding:0 26px}
:is(#hm,#hm2) .pr-ent-r{padding:34px 32px}
:is(#hm,#hm2) .pr-feats--2{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;border-top-color:#27272a;margin-top:16px}
:is(#hm,#hm2) .pr-ent .pr-feats li{color:#e4e4e7}
:is(#hm,#hm2) .pr-ent .pr-feats li svg{stroke:#4ade80}

/* comparison table */
:is(#hm,#hm2) .pr-table-wrap{margin-top:48px;border:1px solid var(--hm-line);border-radius:16px;background:#fff;overflow-x:auto}
:is(#hm,#hm2) .pr-table{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;font-size:.88rem}
:is(#hm,#hm2) .pr-table thead th{position:sticky;top:0;z-index:2;background:#fff;padding:20px 14px 16px;text-align:left;vertical-align:bottom;border-bottom:1px solid var(--hm-line)}
:is(#hm,#hm2) .pr-table thead th b{display:block;font-size:1rem;font-weight:600;color:var(--hm-ink)}
:is(#hm,#hm2) .pr-table thead th span{display:block;font:500 .74rem var(--hm-mono);color:var(--hm-muted);margin-top:4px}
:is(#hm,#hm2) .pr-table thead th i{font-style:normal}
:is(#hm,#hm2) .pr-table thead th em{display:inline-block;font-style:normal;font:500 .6rem var(--hm-mono);text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--hm-green);padding:3px 6px;border-radius:5px;margin-bottom:8px}
:is(#hm,#hm2) .pr-table .pr-feat-h{width:30%}
:is(#hm,#hm2) .pr-table .pr-feat-h .hm-mono{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--hm-faint)}
:is(#hm,#hm2) .pr-table tbody th{font-weight:500;color:var(--hm-text);text-align:left;padding:13px 20px;border-bottom:1px solid var(--hm-line-2)}
:is(#hm,#hm2) .pr-table td{padding:13px 14px;border-bottom:1px solid var(--hm-line-2)}
:is(#hm,#hm2) .pr-table tbody tr:not(.pr-cat):hover th,:is(#hm,#hm2) .pr-table tbody tr:not(.pr-cat):hover td{background:#fafafa}
:is(#hm,#hm2) .pr-table .pro{background:#f7fdf9}
:is(#hm,#hm2) .pr-table thead .pro{background:#f0fdf4;box-shadow:inset 0 2px 0 var(--hm-green)}
:is(#hm,#hm2) .pr-table tbody tr:not(.pr-cat):hover td.pro{background:#effbf3}
:is(#hm,#hm2) .pr-table tbody .pr-cat th{padding:22px 20px 10px;font:500 .7rem var(--hm-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--hm-green);text-align:left;background:#fff;border-bottom:1px solid var(--hm-line)}
:is(#hm,#hm2) .pr-yes{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--hm-green-bg);color:var(--hm-green);font-size:.7rem;font-weight:700}
:is(#hm,#hm2) .pr-no{color:#d4d4d8;font-weight:600}
:is(#hm,#hm2) .pr-val{font:500 .8rem var(--hm-mono);color:var(--hm-text)}
:is(#hm,#hm2) .pr-val.b{color:var(--hm-ink);font-weight:600}
:is(#hm,#hm2) .pr-val.soft{color:#b45309}
:is(#hm,#hm2) .pr-table tfoot td,:is(#hm,#hm2) .pr-table tfoot th{padding:18px 14px 20px}
:is(#hm,#hm2) .pr-tbtn{display:flex;justify-content:center;align-items:center;height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--hm-line);font-size:.8rem;font-weight:600;color:var(--hm-ink);background:#fff;white-space:nowrap;transition:background .15s,border-color .15s}
:is(#hm,#hm2) .pr-tbtn:hover{background:#fafafa;border-color:#d4d4d8}
:is(#hm,#hm2) .pr-tbtn.g{background:var(--hm-green);border-color:var(--hm-green);color:#fff}
:is(#hm,#hm2) .pr-tbtn.g:hover{background:var(--hm-green-d)}
:is(#hm,#hm2) .pr-note{margin-top:14px;font:500 .72rem var(--hm-mono);color:var(--hm-faint)}

@media (max-width:1100px){
  :is(#hm,#hm2) .pr-plans{grid-template-columns:1fr 1fr}
  :is(#hm,#hm2) .pr-plan:nth-of-type(odd){border-right:1px solid var(--hm-line)}
  :is(#hm,#hm2) .pr-plan:nth-of-type(even){border-right:0}
  :is(#hm,#hm2) .pr-plan:nth-of-type(-n+2){border-bottom:1px solid var(--hm-line)}
  :is(#hm,#hm2) .pr-ent{grid-template-columns:1fr}
  :is(#hm,#hm2) .pr-ent-l{border-right:0;border-bottom:1px solid #27272a}
}
@media (max-width:640px){
  :is(#hm,#hm2) .pr-plans{grid-template-columns:1fr}
  :is(#hm,#hm2) .pr-plan{border-right:0 !important;border-bottom:1px solid var(--hm-line)}
  :is(#hm,#hm2) .pr-desc{min-height:0}
  :is(#hm,#hm2) .pr-feats--2{grid-template-columns:1fr}
  :is(#hm,#hm2) .pr-ent-l,:is(#hm,#hm2) .pr-ent-r{padding:26px 20px}
  :is(#hm,#hm2) .pr-toggle button{padding:0 12px;font-size:.84rem}
}