/* Pricing, FAQ and footer, styled by each design's own tokens. */
.x-sec { padding: clamp(60px, 8vw, 110px) 0; }
.x-sec h2 { font-family: var(--display); }
.x-kick { font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin: 0 0 14px; }
.x-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 36px; }
.x-plan { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 12px; align-content: start; }
.x-hot { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.x-name { font-family: var(--display); font-size: 1.05rem; }
.x-price { font: 700 1.8rem/1 var(--display); }
.x-price small { font: 500 .85rem var(--text); opacity: .7; }
.x-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .93rem; }
.x-plan li { padding-left: 20px; position: relative; }
.x-plan li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.x-btn { display: inline-flex; justify-content: center; padding: .8em 1em; border-radius: 10px; background: var(--accent); color: var(--accent-ink, #111); text-decoration: none; font-weight: 700; margin-top: 4px; }
.x-faq { margin-top: 30px; display: grid; gap: 10px; max-width: 860px; }
.x-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.x-faq summary { cursor: pointer; font-weight: 700; list-style: none; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: "+"; float: right; font-weight: 400; opacity: .6; }
.x-faq details[open] summary::after { content: "-"; }
.x-faq p { margin: 10px 0 0; opacity: .85; line-height: 1.6; }
.x-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding: 26px 0; font-size: .88rem; }
.x-foot small { flex-basis: 100%; opacity: .65; }
.x-links { display: flex; flex-wrap: wrap; gap: 16px; }
.x-links a { text-decoration: none; opacity: .8; }
.x-links a:hover { opacity: 1; text-decoration: underline; }
.x-signin { font-weight: 600; text-decoration: none; opacity: .85; white-space: nowrap; }
.x-signin:hover { opacity: 1; text-decoration: underline; }