<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- TIERS — a dark pricing page with a monthly/annual toggle. Edit the PLANS array
     + --brand vars. Prices update on toggle automatically. No build, no deps. -->
<title>Pricing — {{Product}}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
  :root{ --brand-1:#5b8cff; --brand-2:#9b6cff; --bg:#0a0b11; --card:#13141d; --ink:#f6f7fb; --dim:#9aa0b4; --line:rgba(255,255,255,.09);
    --fd:'Syne',sans-serif; --fb:'Inter',system-ui,sans-serif; --ease:cubic-bezier(.16,1,.3,1); }
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--bg);color:var(--ink);font-family:var(--fb);min-height:100vh;padding:4rem 1.25rem}
  .wrap{max-width:1000px;margin:0 auto;text-align:center}
  h1{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,5vw,3rem)}
  p.sub{color:var(--dim);margin:.8rem auto 2rem;max-width:46ch}
  .toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:.25rem;margin-bottom:2.5rem;font-size:.9rem}
  .toggle button{background:none;border:none;color:var(--dim);padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;font-family:var(--fb)}
  .toggle button.on{background:linear-gradient(120deg,var(--brand-1),var(--brand-2));color:#06070c;font-weight:600}
  .save{color:#5fd38a;font-size:.78rem;margin-left:.4rem}
  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;text-align:left}
  .plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.8rem}
  .plan.featured{border-color:var(--brand-1);box-shadow:0 24px 60px -32px var(--brand-1);position:relative}
  .plan.featured::before{content:'Most popular';position:absolute;top:-11px;left:1.8rem;background:linear-gradient(120deg,var(--brand-1),var(--brand-2));color:#06070c;font-size:.7rem;font-weight:700;padding:.25rem .7rem;border-radius:999px}
  .plan h3{font-family:var(--fd);font-size:1.2rem}
  .plan .price{font-family:var(--fd);font-size:2.4rem;margin:.6rem 0 .2rem}
  .plan .price small{font-size:.9rem;color:var(--dim);font-weight:400}
  .plan .blurb{color:var(--dim);font-size:.88rem;margin-bottom:1.2rem}
  .plan ul{list-style:none;margin-bottom:1.4rem}
  .plan li{padding:.4rem 0;color:var(--dim);font-size:.9rem;border-bottom:1px solid var(--line)}
  .plan li::before{content:'✓ ';color:var(--brand-1)}
  .plan a{display:block;text-align:center;border-radius:10px;padding:.75rem;font-weight:600;text-decoration:none}
  .plan a.primary{background:linear-gradient(120deg,var(--brand-1),var(--brand-2));color:#06070c}
  .plan a.ghost{border:1px solid var(--line);color:var(--ink)}
</style>
</head>
<body>
  <div class="wrap">
    <h1>Simple, honest pricing</h1>
    <p class="sub">{{One line on your value. Cancel anytime.}}</p>
    <div class="toggle"><button id="m" class="on">Monthly</button><button id="a">Annual<span class="save">−20%</span></button></div>
    <div class="plans" id="plans"></div>
  </div>
  <script>
    // Edit your plans here. `mo` = monthly price; annual auto-applies 20% off.
    const PLANS = [
      { name: 'Starter', mo: 0,  blurb: '{{For getting started}}', feats: ['{{Feature}}','{{Feature}}','{{Feature}}'], cta: 'Get started', featured: false },
      { name: 'Pro',     mo: 19, blurb: '{{For growing teams}}',   feats: ['{{Everything in Starter}}','{{Feature}}','{{Feature}}','{{Feature}}'], cta: 'Start free trial', featured: true },
      { name: 'Scale',   mo: 49, blurb: '{{For scale}}',           feats: ['{{Everything in Pro}}','{{Feature}}','{{Feature}}'], cta: 'Contact sales', featured: false },
    ];
    const wrap = document.getElementById('plans');
    const el = (t,c,x)=>{const n=document.createElement(t);if(c)n.className=c;if(x!=null)n.textContent=x;return n;};
    let annual = false;
    function render(){
      wrap.replaceChildren();
      for(const p of PLANS){
        const card = el('div','plan'+(p.featured?' featured':''));
        card.appendChild(el('h3',null,p.name));
        const mo = annual ? Math.round(p.mo*0.8) : p.mo;
        const price = el('div','price','$'+mo);
        price.appendChild(el('small',null, p.mo===0?'':(annual?' /mo, billed yearly':' /mo')));
        card.appendChild(price);
        card.appendChild(el('p','blurb',p.blurb));
        const ul = el('ul'); for(const f of p.feats) ul.appendChild(el('li',null,f)); card.appendChild(ul);
        const a = el('a',p.featured?'primary':'ghost',p.cta); a.href='#'; card.appendChild(a);
        wrap.appendChild(card);
      }
    }
    document.getElementById('m').onclick=()=>{annual=false;document.getElementById('m').classList.add('on');document.getElementById('a').classList.remove('on');render();};
    document.getElementById('a').onclick=()=>{annual=true;document.getElementById('a').classList.add('on');document.getElementById('m').classList.remove('on');render();};
    render();
  </script>
</body>
</html>
