/* Pricing: Free, Premium and Business side by side, answers, then the closing band. */
:root{
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");
}

.pr{overflow-x:clip}
.pr-hero{position:relative;isolation:isolate;max-width:1240px;margin:0 auto;padding:78px 24px 52px;text-align:center;display:grid;justify-items:center;gap:18px}
.pr-hero .glow{position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;pointer-events:none;opacity:var(--glow)}
.pr-hero .g1{width:600px;height:600px;left:calc(50% - 700px);top:-300px;background:radial-gradient(closest-side,rgba(242,211,201,.95),rgba(242,211,201,0))}
.pr-hero .g2{width:560px;height:560px;right:calc(50% - 680px);top:-150px;background:radial-gradient(closest-side,rgba(211,220,203,.9),rgba(211,220,203,0))}
.pr-hero h1{margin:0;font-size:clamp(40px,6vw,68px);font-weight:650;line-height:1.02;letter-spacing:-.04em}
.pr-hero p{margin:0;color:var(--muted);font-size:18px}

/* the plans: two cards side by side whose rows line up (name, price, words, button, what's in it) */
.plans{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding:38px 40px 40px;border-radius:30px;background:var(--surface)}
.plan-premium{border:1.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,#E7AE9F,#D9C7E8 38%,#BCD3C2 68%,#E6CF9C) border-box;
  box-shadow:0 50px 100px -52px rgba(165,86,76,.5)}
.plan-free,.plan-biz{border:1.5px solid var(--line);box-shadow:0 40px 90px -60px rgba(24,23,26,.35)}
.plan h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.2px}
.amount{margin:22px 0 0;display:flex;align-items:baseline;gap:8px}
.amount b{font-size:72px;font-weight:650;line-height:.9;letter-spacing:-.05em;font-variant-numeric:lining-nums}
.amount span{font-size:17px;color:var(--muted)}
.blurb{margin:18px 0 0;max-width:34ch;color:var(--body-ink);font-size:16px;line-height:1.55}
.plan-cta{margin-top:28px}
.plan-btn{display:flex;align-items:center;justify-content:center;height:52px;border-radius:14px;background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:15.5px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 28px -14px rgba(24,23,26,.8);transition:transform .2s,background .2s}
.plan-btn:hover{transform:translateY(-1px)}
.plan-btn{border:0;width:100%;font-family:inherit;cursor:pointer}
.plan-btn:disabled{opacity:.6;cursor:wait;transform:none}
.plan-btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.plan-btn-line:hover{background:var(--hover)}
.plan-note{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.plan-list{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.inc{margin:0 0 18px;font-size:13px;font-weight:600;color:var(--muted)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;font-size:15.5px;line-height:1.4}
.ticks li::before{content:"";width:18px;height:18px;margin-top:1px;background:var(--ink);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.fair{margin:22px auto 0;padding:0 24px;text-align:center;font-size:13px;color:var(--muted)}

.faq{max-width:760px;margin:0 auto;padding:110px 24px 100px}
.faq h2{margin:0 0 20px;text-align:center;font-size:clamp(28px,3.4vw,40px);font-weight:650;letter-spacing:-.035em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:var(--muted);-webkit-mask:var(--plus) center/contain no-repeat;mask:var(--plus) center/contain no-repeat;transition:transform .25s}
.faq summary:hover::after{background:var(--ink)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:-6px 0 22px;padding-right:40px;color:var(--body-ink);font-size:15.5px;line-height:1.6}
.faq details a{color:var(--ink);text-underline-offset:2px}

@media (max-width:1040px){
  .plans{grid-template-columns:minmax(0,1fr);max-width:560px;gap:18px}
  .plan{grid-row:auto;grid-template-rows:none}
}
@media (max-width:760px){
  .pr-hero{padding:52px 20px 36px}
  .pr-hero p{font-size:16.5px}
  .plans{grid-template-columns:minmax(0,1fr);gap:18px}
  .plan{grid-row:auto;grid-template-rows:none;padding:30px 24px 30px;border-radius:26px}
  .amount b{font-size:64px}
  .faq{padding:80px 20px 80px}
}
@media (prefers-reduced-motion: reduce){ .plan-btn,.faq summary::after{transition:none} }