@font-face {
    font-family: Inter;
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
.pricing-site {
    --pricing-ink: #0e104f;
    --pricing-muted: #707fa8;
    --pricing-purple: #5335ff;
    --pricing-line: #e1dcff;
    margin: 0;
    color: var(--pricing-ink);
    background: #fdfdff;
    font: 400 16px/1.6 Inter, 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.pricing-site *, .pricing-site *::before, .pricing-site *::after { box-sizing: border-box; }
.pricing-site [hidden] { display: none !important; }
.pricing-site a { color: inherit; text-decoration: none; }
.pricing-site :is(a, button):focus-visible { outline: 3px solid #8a78ff; outline-offset: 4px; }
.pricing-site svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pricing-site .pricing-icons { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.pricing-skip { position: absolute; z-index: 101; top: -100px; left: 16px; background: #fff; padding: 12px 16px; border-radius: 6px; }
.pricing-skip:focus { top: 12px; }

/* Keep the shared public type scale, with a full-height product visual in the hero. */
.pricing-site main { background: radial-gradient(ellipse at 72% 30%, #eeedff 0, transparent 45%), linear-gradient(115deg, #fafaff 0, #f8f9ff 48%, #f3f2ff 100%); }
.pricing-container { width: var(--public-content-width); margin-inline: auto; }
.pricing-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.2fr); grid-template-areas: "intro showcase card"; align-items: center; gap: clamp(24px, 2vw, 38px); padding: clamp(40px, 3.2vw, 60px) 0 36px; }
.pricing-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--public-gutter)); pointer-events: none; background: linear-gradient(90deg, #fafafffa 0%, #fafaffed 23%, #fafaff99 35%, #fafaff19 56%, #fafaff0a 100%), #f3f0ff url('../images/pricing/pricing-cafe-interior.png') center bottom / cover no-repeat; }
.pricing-intro { grid-area: intro; position: relative; z-index: 2; min-width: 0; align-self: start; padding-top: 46px; }
.pricing-showcase { grid-area: showcase; position: relative; z-index: 1; min-width: 0; width: calc(100% + 160px); aspect-ratio: 1 / 1.06; margin-left: -140px; align-self: end; }
.pricing-showcase::before { content: ''; position: absolute; z-index: -1; inset: 18% 3% 0; border-radius: 50%; background: radial-gradient(ellipse, #d8cff533, #ebe7ff00 70%); }
.pricing-showcase::after { content: ''; position: absolute; z-index: -1; left: 4%; right: 0; bottom: 0; height: 30%; border-radius: 50%; background: radial-gradient(ellipse, #c8b9e633, transparent 70%); }
.pricing-showcase img { display: block; width: 100%; height: auto; }
.pricing-phone-frame { position: absolute; z-index: 1; inset: 0; overflow: clip; }
.pricing-showcase .pricing-phone { position: absolute; z-index: 1; right: -6%; bottom: 3%; width: 95%; height: auto; filter: drop-shadow(0 10px 12px #30231b26); }
.pricing-stand { position: absolute; z-index: 2; left: -23%; bottom: -3%; width: 56%; }
.pricing-stand::after { content: ''; position: absolute; z-index: -1; left: 15%; right: 12%; bottom: 12%; height: 3%; border-radius: 50%; background: #30231b29; filter: blur(4px); }
/* Clip only the photo's white studio backdrop, without stretching the product. */
.pricing-stand img { aspect-ratio: 1; clip-path: polygon(12.520% 65.152%, 20.734% 23.365%, 21.212% 22.169%, 22.169% 21.132%, 75.359% 16.906%, 76.396% 17.065%, 77.432% 17.943%, 78.230% 19.697%, 87.400% 78.708%, 87.480% 79.585%, 86.762% 80.383%, 32.057% 85.885%, 30.861% 85.965%, 29.984% 85.167%, 26.715% 65.311%, 13.955% 66.268%, 12.919% 65.869%); }
.pricing-intro h1 { margin: 24px 0 23px; font-size: 3.645833vw; font-weight: 700; line-height: 1.14; letter-spacing: -.04vw; }
.pricing-intro h1 span { color: var(--pricing-purple); }
.pricing-description { max-width: 36ch; margin: 0; color: var(--pricing-muted); font-size: 1.237vw; line-height: 1.52; font-weight: 400; letter-spacing: -.025vw; }
.pricing-site .pricing-demo { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 3.84vw; margin-top: 2.2vw; padding: 16px 23px; border: 1px solid #d5d5f5; border-radius: 20px; color: #44518b; background: #ffffff20; font-size: clamp(13px, .912vw, 16px); line-height: 1.5; font-weight: 550; transition: background-color 150ms, box-shadow 150ms; }
.pricing-demo:hover { background: #eeebff; }
.pricing-demo svg { width: 21px; height: 21px; }
.pricing-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; color: var(--pricing-purple); background: linear-gradient(135deg, #e5dfff, #efedff); }
.pricing-card { grid-area: card; position: relative; z-index: 3; min-width: 0; width: 100%; padding: clamp(24px, 2vw, 36px); border: 1px solid var(--pricing-line); border-radius: 24px; background: #ffffffeb; box-shadow: 0 10px 24px #5e3de608; }
.pricing-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.pricing-badge { border: 1px solid var(--pricing-line); border-radius: 999px; padding: 5px 12px; color: var(--pricing-purple); background: #f3f0ff; font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center; }
.pricing-card h2 { margin: 0 0 12px; font-size: clamp(26px, 2.08vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.pricing-card-description { margin: 0; color: var(--pricing-muted); font-size: 16px; line-height: 1.65; }
.pricing-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-top: 26px; }
.pricing-amount p { display: flex; align-items: baseline; gap: 10px; margin: 0; line-height: 1.2; }
.pricing-amount strong { font-size: clamp(54px, 4.2vw, 76px); font-weight: 750; letter-spacing: -.05em; }
.pricing-amount p span { font-size: 24px; font-weight: 650; }
.pricing-tax { color: var(--pricing-muted); font-size: 16px; font-weight: 500; white-space: nowrap; }
.pricing-price-note { margin: 8px 0 0; color: var(--pricing-muted); font-size: 12px; }
.pricing-included { display: grid; gap: 16px; margin: 26px 0; padding: 26px 0 0; border-top: 1px solid var(--pricing-line); list-style: none; }
.pricing-included li { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(14px, 1.04vw, 18px); line-height: 1.65; letter-spacing: -.025em; }
.pricing-included svg { width: 21px; height: 21px; margin-top: 2px; color: var(--pricing-purple); stroke-width: 2; }
.pricing-site .pricing-button { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 3.84vw; padding: 16px 20px; border: 1px solid transparent; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #4b24ef, #4c2cfc); font-size: clamp(13px, .912vw, 16px); font-weight: 550; line-height: 1.5; transition: background-color 150ms, box-shadow 150ms; }
.pricing-site .pricing-button:hover { background: #4020df; box-shadow: 0 7px 20px #5135ff24; }
.pricing-button svg { width: 21px; height: 21px; }
.pricing-card-note { margin: 13px 0 0; color: var(--pricing-muted); font-size: 12px; text-align: center; }

@media (min-width: 1800px) {
    .pricing-intro h1 { font-size: 63px; letter-spacing: -2px; }
    .pricing-description { font-size: 22px; }
    .pricing-site .pricing-demo { margin-top: 40px; min-height: 69px; }
    .pricing-site .pricing-button { min-height: 69px; }
}
@media (max-width: 1100px) {
    .pricing-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "intro showcase" "card card"; gap: 32px; padding-block: 42px 36px; }
    .pricing-hero::before { background-size: 100% 100%, auto 650px; background-position: center, center top; }
    .pricing-intro { padding-top: 0; }
    .pricing-showcase { width: 100%; max-width: 500px; margin-left: 0; align-self: center; justify-self: center; }
    .pricing-showcase .pricing-phone { right: -9.8%; width: 84%; }
    .pricing-stand { left: -5%; width: 50%; bottom: -3.8%; }
    .pricing-description { font-size: 17px; }
    .pricing-site .pricing-demo, .pricing-site .pricing-button { min-height: 52px; border-radius: 17px; font-size: 14px; }
    .pricing-card { max-width: 640px; justify-self: center; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .pricing-description { font-size: 14px; }
}
@media (max-width: 900px) {
    .pricing-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "showcase" "card"; padding: 44px 0 24px; }
    .pricing-hero::before { background: linear-gradient(120deg, #fafaff, #f3f0ff); }
    .pricing-showcase::before { inset: -12px calc(-1 * var(--public-gutter)) -16px; border-radius: 0; background: linear-gradient(to bottom, #f8f7ff, transparent 18%, transparent 85%, #f5f2ff), url('../images/pricing/pricing-cafe-interior.png') 42% bottom / auto 100% no-repeat; }
    .pricing-intro h1 { margin: 24px 0 22px; font-size: clamp(34px, 6.3vw, 54px); letter-spacing: -.035em; line-height: 1.18; }
    .pricing-description { max-width: 44ch; font-size: 17px; line-height: 1.65; letter-spacing: -.3px; }
    .pricing-site .pricing-demo { margin-top: 26px; }
    .pricing-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 12px; }
}
@media (max-width: 680px) {
    .pricing-showcase { max-width: 420px; }
    .pricing-card { padding: 26px; border-radius: 22px; }
    .pricing-card h2 { font-size: 28px; }
    .pricing-card-description { font-size: 15px; }
}
@media (max-width: 480px) {
    .pricing-hero { padding-top: 32px; gap: 24px; }
    .pricing-intro h1 { font-size: clamp(30px, 7.5vw, 36px); line-height: 1.23; margin-top: 22px; }
    .pricing-description { font-size: 15px; line-height: 1.7; letter-spacing: -.2px; }
    .pricing-site .pricing-demo { margin-top: 23px; padding: 12px 16px; font-size: 12px; border-radius: 16px; }
    .pricing-card { padding: 24px; }
    .pricing-card h2 { font-size: 26px; }
    .pricing-card-heading { gap: 10px; }
    .pricing-badge { font-size: 10px; padding-inline: 10px; }
    .pricing-amount { gap: 10px; }
    .pricing-amount strong { font-size: 54px; }
    .pricing-amount p span { font-size: 21px; }
    .pricing-tax { font-size: 14px; }
    .pricing-included li { font-size: 13px; gap: 10px; }
    .pricing-site .pricing-button { min-height: 52px; border-radius: 16px; font-size: 14px; }
}
@media (max-width: 370px) {
    .pricing-card { padding: 20px; }
    .pricing-card h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .pricing-site .pricing-button, .pricing-site .pricing-demo { transition: none; }
}