/* /pricing/ in the homepage design language: hairline borders, no shadows, same type scale and page frame. */
[data-pricing],[data-pricing-faq],[data-pricing-cta]{width:var(--page-frame);max-width:1536px;margin-inline:auto;box-sizing:border-box}
/* Text inside the frame keeps clear of the vertical rails: the same space as the page gutter outside them, at most 32px. */
#reference-page{--pricing-inset:min(var(--page-gutter),32px)}
[data-pricing]{padding-top:96px}
[data-pricing-head]{display:flex;flex-direction:column;align-items:center;gap:32px;margin-bottom:48px;text-align:center}
[data-pricing-head] h1{margin:0;font-size:clamp(40px,4.6vw,72px);font-weight:400;line-height:1;letter-spacing:-.045em;color:var(--text-primary);text-wrap:balance}
[data-pricing-billing]{display:inline-flex;flex-shrink:0;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2,#f7f7f5)}
[data-pricing-billing] button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:14px;color:var(--text-secondary);cursor:pointer}
[data-pricing-billing] button[aria-selected="true"]{background:#fff;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border)}
[data-pricing-billing] button span{font-size:12px;color:#6f8064}
[data-pricing-billing] button:focus-visible{outline:1px solid var(--text-primary);outline-offset:2px}
[data-pricing-plans]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
[data-pricing-plan]{display:flex;flex-direction:column;gap:20px;padding:28px;border:1px solid var(--border);border-radius:12px;background:#fff}
/* Pro is the recommended plan, so its card is the one dark card in the row. */
[data-pricing-plan][data-featured]{background:#1a1a1a;border-color:#1a1a1a}
[data-pricing-plan][data-featured] :is(h2,[data-pricing-amount]){color:#fff}
[data-pricing-plan][data-featured] :is([data-pricing-desc],[data-pricing-period],[data-pricing-list]){color:rgba(255,255,255,.64)}
[data-pricing-plan][data-featured] [data-pricing-launch]{color:#b5c6a8}
[data-pricing-plan][data-featured] [data-pricing-badge]{background:transparent;border-color:rgba(255,255,255,.24);color:#fff}
[data-pricing-plan][data-featured] [data-pricing-features]{border-top-color:rgba(255,255,255,.16)}
[data-pricing-plan][data-featured] [data-pricing-features] li{color:rgba(255,255,255,.86)}
[data-pricing-plan][data-featured] [data-pricing-features] svg{color:#fff}
#reference-page [data-pricing-plan][data-featured]>a.rounded-full{background:#fff;color:#1a1a1a}
#reference-page [data-pricing-plan][data-featured]>a.rounded-full:hover{background:#e6e6e4;color:#1a1a1a}
[data-pricing-plan]>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
[data-pricing-plan] h2{margin:0;font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.03em;color:var(--text-primary)}
[data-pricing-badge]{padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:12px;line-height:1.2;color:var(--text-secondary)}
[data-pricing-desc]{min-height:3em;margin:-8px 0 0;font-size:15px;line-height:1.5;color:var(--text-secondary)}
[data-pricing-price]{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:96px;align-content:flex-start}
[data-pricing-amount]{font-size:clamp(40px,3.4vw,52px);font-weight:400;line-height:1;letter-spacing:-.045em;color:var(--text-primary)}
[data-pricing-list]{order:-1;width:100%;font-size:15px;color:var(--text-muted,#9a9a96)}
[data-pricing-period]{font-size:14px;line-height:1.4;color:var(--text-secondary)}
[data-pricing-launch]{width:100%;font-size:13px;color:#6f8064}
[data-pricing-plan]>a{width:100%;box-sizing:border-box}
[data-pricing-features]{display:grid;gap:12px;margin:4px 0 0;padding:20px 0 0;border-top:1px solid var(--border);list-style:none}
[data-pricing-features] li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:var(--text-body,#3f413e)}
[data-pricing-features] svg{flex-shrink:0;width:16px;height:16px;margin-top:2px;color:var(--text-primary)}
[data-pricing-faq]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;padding:24px var(--pricing-inset) 0;border-top:1px solid var(--border)}
[data-pricing-faq] h2{margin:24px 0 0;font-size:clamp(30px,3vw,44px);font-weight:400;line-height:1.15;letter-spacing:-.035em;color:var(--text-primary)}
[data-pricing-faq] details{border-bottom:1px solid var(--border)}
[data-pricing-faq] summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:18px;line-height:1.4;letter-spacing:-.01em;color:var(--text-primary);cursor:pointer;list-style:none}
[data-pricing-faq] summary::-webkit-details-marker{display:none}
[data-pricing-faq] summary span{position:relative;flex-shrink:0;width:14px;height:14px}
[data-pricing-faq] summary span::before,[data-pricing-faq] summary span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .2s ease}
[data-pricing-faq] summary span::after{transform:rotate(90deg)}
[data-pricing-faq] details[open] summary span::after{transform:rotate(0)}
[data-pricing-faq] details p{max-width:62ch;margin:-8px 0 24px;font-size:16px;line-height:1.55;color:var(--text-secondary)}
/* Closing call to action; the buttons are the hero buttons, placed by [data-section-cta] in homepage.css. */
[data-pricing-cta]{margin-block:48px 96px;padding-inline:var(--pricing-inset);text-align:center}
[data-pricing-cta] h2{margin:0;font-size:clamp(30px,3vw,44px);font-weight:400;line-height:1.15;letter-spacing:-.035em;color:var(--text-primary);text-wrap:balance}
[data-pricing-cta] p{max-width:52ch;margin:16px auto 0;font-size:17px;line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
[data-pricing-cta] [data-section-cta]{justify-content:center}
[data-pricing-proof]{margin:32px 0 0;text-align:center;font-size:18px;line-height:1.4;letter-spacing:-.01em;color:var(--text-primary)}
[data-sr]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-pricing-compare]{width:var(--page-frame);max-width:1536px;margin-inline:auto;box-sizing:border-box;padding-top:24px;border-top:1px solid var(--border)}
[data-pricing-compare] h2{margin:24px 0 32px;padding-inline:var(--pricing-inset);font-size:clamp(30px,3vw,44px);font-weight:400;line-height:1.15;letter-spacing:-.035em;color:var(--text-primary)}
[data-compare-scroll]{overflow-x:auto}
/* While columns sit past the right edge, that edge fades out. Right only: the feature names stick to the left edge, and a left fade would dim them.
   The depth is registered as a <length> so it interpolates with the scroll instead of jumping. A table that fits has an inactive scroll timeline, so it falls back to 0px and never fades.
   Without scroll-driven animations the right edge stays faded, which is right for a table that is almost always at its start. */
@property --scroll-fade--end{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes scroll-fade-end-out{from{--scroll-fade--end:var(--scroll-fade--size)}to{--scroll-fade--end:0px}}
[data-compare-scroll]{--scroll-fade--size:40px;--scroll-fade--end:var(--scroll-fade--size);-webkit-mask-image:linear-gradient(to right,black calc(100% - var(--scroll-fade--end)),transparent 100%);mask-image:linear-gradient(to right,black calc(100% - var(--scroll-fade--end)),transparent 100%)}
@supports(animation-timeline:scroll(self)){[data-compare-scroll]{--scroll-fade--end:initial;animation-name:scroll-fade-end-out;animation-timeline:scroll(self x);animation-range:calc(100% - 96px) 100%;animation-fill-mode:both}}
[data-pricing-compare] table{width:100%;min-width:520px;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.4}
[data-pricing-compare] thead th,[data-pricing-compare] thead td{padding:0 16px 16px;background:var(--bg,#fff);text-align:left;font-size:18px;font-weight:400;letter-spacing:-.02em;color:var(--text-primary)}
[data-pricing-compare] thead td{width:34%}
[data-pricing-compare] [data-compare-group] th{padding:32px 16px 12px;text-align:left;font-size:13px;font-weight:500;color:var(--text-secondary)}
[data-pricing-compare] tbody tr:not([data-compare-group]){border-top:1px solid var(--border)}
[data-pricing-compare] tbody th[scope="row"]{padding:16px;text-align:left;font-weight:400;color:var(--text-primary)}
[data-pricing-compare] td{padding:16px;color:var(--text-body,#3f413e);vertical-align:top}
[data-pricing-compare] [data-featured]{background:var(--surface-2,#f7f7f5)}
/* When the table scrolls sideways on small screens, the feature names stay in view. */
[data-pricing-compare] tbody th[scope="row"],[data-pricing-compare] thead td{position:sticky;left:0;z-index:1;background:var(--bg,#fff)}
[data-pricing-compare] [data-compare-group] th span{position:sticky;left:16px;display:inline-block}
[data-pricing-compare] [data-included] svg{display:block;width:16px;height:16px;color:var(--text-primary)}
[data-pricing-compare] [data-excluded]{color:var(--text-muted,#9a9a96)}
@media(max-width:1023px){
[data-pricing-plans]{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
[data-pricing-desc]{min-height:0}
[data-pricing-price]{min-height:0}
[data-pricing-faq]{grid-template-columns:1fr;gap:8px}
}
@media(max-width:700px){
[data-pricing-proof]{font-size:16px}
[data-pricing-compare] table{font-size:14px}
[data-pricing-compare] thead td{width:38%}
[data-pricing-compare] tbody th[scope="row"],[data-pricing-compare] td{padding:14px 10px}
[data-pricing]{padding-top:48px}
[data-pricing-head] h1{font-size:40px}
[data-pricing-plan]{padding:22px}
[data-pricing-faq] summary{font-size:16px;padding:20px 0}
[data-pricing-cta]{margin-block:32px 56px}
[data-pricing-cta] p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){[data-pricing-faq] summary span::after{transition:none}}