/* Product pricing: editorial storytelling, then recognizable per-application choices. */
.pricing-page { color:var(--hub-text); max-width:1240px; margin:auto; --pricing-line:var(--hub-border); }
.pricing-page *, .pricing-page *::before, .pricing-page *::after { box-sizing:border-box; }
.pricing-page :is(h1,h2,h3,p) { margin:0; }
.pricing-page :is(h1,h2,h3) { text-wrap:balance; }
.pricing-page :is(section,article)[id] { scroll-margin-top:26px; }
.pricing-page .pricing-sage { --pricing-tone:#cee8ae; --pricing-ink:#213b1b; --pricing-detail:#aad179; }
.pricing-page .pricing-peach { --pricing-tone:#f0d7bc; --pricing-ink:#513923; --pricing-detail:#dfab7a; }
.pricing-page .pricing-blue { --pricing-tone:#c5def3; --pricing-ink:#193f5f; --pricing-detail:#8cb9df; }
.pricing-eyebrow { color:var(--hub-accent); font:11px/1.7 'Fira Code',monospace; letter-spacing:1.6px; text-transform:uppercase; }
.pricing-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.1fr 1fr; gap:5%; padding:56px 40px; border:1px solid var(--pricing-line); border-radius:26px; background:radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--hub-accent) 9%,transparent),transparent 65%),var(--hub-panel); overflow:hidden; }
.pricing-hero h1 { font-size:clamp(38px,3.8vw,60px); line-height:1.06; letter-spacing:-2.3px; font-weight:650; margin:23px 0; }
.pricing-hero h1 em, .pricing-finale h2 em { color:var(--hub-accent); font-style:normal; }
.pricing-lead { color:var(--hub-muted); font-size:15px; line-height:1.9; max-width:570px; }
.pricing-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:28px; }
.pricing-text-link { color:var(--hub-accent); font-size:13px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; gap:12px; }
.pricing-text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.pricing-page .pricing-small { color:var(--hub-muted); font-size:12px; line-height:1.8; margin-top:18px; }
.pricing-hero-art { position:relative; align-self:center; padding:24px 0; min-width:0; }
.pricing-orbit { width:95%; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--hub-accent) 22%,transparent); border-radius:50%; position:absolute; top:-4%; right:-10%; z-index:-1; }
.pricing-orbit::after { content:''; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--hub-accent); top:12%; right:12%; box-shadow:0 0 30px color-mix(in srgb,var(--hub-accent) 30%,transparent); }
.pricing-art-window { background:var(--hub-bg); border:1px solid color-mix(in srgb,var(--hub-accent) 45%,var(--hub-border)); border-radius:17px; box-shadow:var(--hub-shadow); transform:rotate(-3deg); }
.pricing-art-top { padding:15px 19px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--pricing-line); color:var(--hub-muted); font:9px 'Fira Code',monospace; letter-spacing:1px; }
.pricing-art-top>span:first-child { font-size:8px; letter-spacing:3px; color:var(--hub-accent); }
.pricing-art-top .hub-icon { width:16px; height:16px; }
.pricing-art-body { padding:26px; }
.pricing-art-label { color:var(--hub-muted); font:9px/1.7 'Fira Code',monospace; letter-spacing:1.5px; }
.pricing-art-body h2 { font-size:28px; line-height:1.15; font-weight:600; letter-spacing:-1px; margin:15px 0 25px; }
.pricing-art-journey { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pricing-art-journey>span { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:10px; color:var(--hub-muted); }
.pricing-art-journey>span .hub-icon { width:45px; height:45px; padding:10px; border:1px solid var(--pricing-line); border-radius:12px; color:var(--hub-accent); background:var(--hub-raised); }
.pricing-art-journey>i { color:var(--hub-muted); font-style:normal; }
.pricing-art-balance { display:flex; align-items:center; gap:13px; border-top:1px solid var(--pricing-line); margin-top:23px; padding-top:20px; }
.pricing-art-balance>svg { color:var(--hub-accent); }
.pricing-art-balance strong, .pricing-art-floating strong { display:block; font-size:13px; font-weight:600; }
.pricing-art-balance span, .pricing-art-floating span { display:block; font-size:10px; line-height:1.7; margin-top:4px; }
.pricing-art-balance span { color:var(--hub-muted); }
.pricing-art-floating { margin:17px -2px 0 14%; background:var(--hub-accent); color:var(--hub-on-accent); padding:16px 19px; border-radius:12px; display:flex; align-items:center; gap:13px; transform:rotate(2deg); box-shadow:var(--hub-shadow); }
.pricing-nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px; padding:20px 4px; border-bottom:1px solid var(--pricing-line); }
.pricing-nav a { min-height:44px; display:inline-flex; align-items:center; color:var(--hub-muted); font-size:12px; }
.pricing-nav a:hover { color:var(--hub-accent); }
.pricing-section { padding:68px 0; }
.pricing-section-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:end; margin-bottom:30px; }
.pricing-section h2, .pricing-lifetime h2 { font-size:clamp(27px,2.7vw,39px); line-height:1.14; letter-spacing:-1.3px; font-weight:600; margin:15px 0; }
.pricing-section-heading>p { font-size:14px; line-height:1.9; color:var(--hub-muted); max-width:520px; padding-bottom:12px; }
.pricing-ai-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.pricing-ai-card { min-width:0; display:flex; flex-direction:column; background:var(--hub-panel); border:1px solid var(--pricing-line); border-radius:18px; padding:20px; }
.pricing-ai-art { height:130px; margin-bottom:24px; background:var(--pricing-tone); color:var(--pricing-ink); border-radius:11px; position:relative; overflow:hidden; }
.pricing-art-icon { width:62px; height:62px; display:grid; place-items:center; border-radius:16px; background:#fff8; border:1px solid #fff9; box-shadow:0 7px 20px #0001; }
.pricing-art-icon .hub-icon { width:32px; height:32px; }
.pricing-idea-art .pricing-art-icon { position:absolute; left:22%; top:28px; transform:rotate(-9deg); }
.pricing-note-line { position:absolute; left:51%; top:48px; height:9px; width:30%; background:var(--pricing-detail); border-radius:6px; transform:rotate(-9deg); }
.pricing-note-line.short { top:70px; width:19%; }
.pricing-spark { position:absolute; font-size:25px; top:15px; right:22%; }
.pricing-build-art .pricing-art-icon { position:absolute; top:31px; left:calc(50% - 31px); transform:rotate(7deg); }
.pricing-module { width:47px; height:47px; border:1px solid color-mix(in srgb,var(--pricing-ink) 35%,transparent); border-radius:10px; position:absolute; top:49px; left:13%; background:#fff3; transform:rotate(-12deg); }
.pricing-module:nth-child(2) { left:auto; right:13%; top:28px; transform:rotate(12deg); background:var(--pricing-detail); }
.pricing-module:nth-child(3) { width:28px; height:28px; top:88px; left:auto; right:32%; transform:rotate(-3deg); }
.pricing-bubble { position:absolute; top:24px; left:18%; width:100px; height:42px; display:flex; align-items:center; gap:5px; padding:15px 20px; background:#fff9; border-radius:12px 12px 12px 2px; }
.pricing-bubble i { width:6px; height:6px; border-radius:50%; background:var(--pricing-ink); opacity:.5; }
.pricing-bubble.reply { left:auto; right:16%; top:69px; background:var(--pricing-detail); border-radius:12px 12px 2px 12px; width:120px; }
.pricing-bubble b { width:40px; height:5px; border-radius:4px; background:var(--pricing-ink); opacity:.35; }
.pricing-card-kicker { font:10px/1.8 'Fira Code',monospace; letter-spacing:1.2px; color:var(--hub-muted); }
.pricing-ai-card h3 { font-size:21px; line-height:1.2; letter-spacing:-.6px; font-weight:600; margin:12px 0 15px; }
.pricing-ai-card>p:not(.pricing-card-kicker) { color:var(--hub-muted); font-size:13px; line-height:1.85; margin-bottom:20px; }
.pricing-card-foot { display:flex; align-items:flex-start; gap:10px; color:var(--hub-muted); font-size:11px; line-height:1.7; margin-top:auto; padding-top:17px; border-top:1px solid var(--pricing-line); }
.pricing-card-foot .hub-icon { width:16px; height:16px; color:var(--hub-accent); }
.pricing-wallet-strip { display:flex; gap:20px; align-items:center; border:1px solid var(--pricing-line); border-radius:16px; padding:24px; margin-top:22px; background:var(--hub-raised); }
.pricing-strip-icon { flex-shrink:0; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--hub-panel); color:var(--hub-accent); border:1px solid var(--pricing-line); }
.pricing-wallet-strip>div { flex:1; }
.pricing-wallet-strip h3 { font-size:17px; font-weight:600; }
.pricing-wallet-strip p { color:var(--hub-muted); font-size:12px; line-height:1.8; margin-top:6px; max-width:680px; }
.pricing-wallet-strip>a { flex-shrink:0; }
.pricing-apps-story { display:grid; grid-template-columns:1fr 1fr; gap:6%; align-items:center; border-top:1px solid var(--pricing-line); }
.pricing-apps-copy h2 { max-width:450px; margin:18px 0 22px; }
.pricing-apps-copy>a { margin-top:16px; }
.pricing-app-stack { padding:28px 20px; background:linear-gradient(140deg,var(--hub-raised),var(--hub-panel)); border:1px solid var(--pricing-line); border-radius:20px; min-width:0; }
.pricing-app-stack>.pricing-art-label { display:block; margin-bottom:22px; }
.pricing-example-app { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; border:1px solid var(--pricing-line); background:var(--hub-bg); border-radius:12px; padding:17px; margin-top:12px; }
.pricing-example-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--pricing-tone); color:var(--pricing-ink); }
.pricing-example-app strong { display:block; font-size:14px; }
.pricing-example-app small { display:block; font-size:11px; color:var(--hub-muted); margin-top:4px; }
.pricing-plan-tag { grid-column:2; justify-self:start; display:inline-flex; align-items:center; gap:7px; color:var(--pricing-ink); background:var(--pricing-tone); padding:5px 9px; border-radius:6px; font-size:10px; }
.pricing-plan-tag .hub-icon { width:13px; height:13px; }
.pricing-lifetime { display:grid; grid-template-columns:150px 1fr; gap:35px; align-items:start; border:1px solid color-mix(in srgb,var(--hub-warning) 45%,var(--hub-border)); background:color-mix(in srgb,var(--hub-warning) 4%,var(--hub-panel)); padding:34px; border-radius:20px; }
.pricing-lifetime .pricing-eyebrow { color:var(--hub-warning); }
.pricing-lifetime h2 { font-size:29px; margin:12px 0 16px; }
.pricing-lifetime p:not(.pricing-eyebrow,.pricing-small) { color:var(--hub-muted); font-size:14px; line-height:1.85; }
.pricing-life-symbol { background:#f0d7bc; color:#513923; border-radius:18px; display:flex; flex-direction:column; align-items:center; padding:20px; margin-top:5px; }
.pricing-life-symbol .hub-icon { width:25px; height:25px; }
.pricing-life-symbol strong { font-size:64px; line-height:1.3; font-weight:600; letter-spacing:-3px; }
.pricing-life-symbol span { font:11px 'Fira Code',monospace; letter-spacing:3px; }
.pricing-life-deadline { margin-top:16px !important; }
.pricing-life-deadline strong { color:var(--hub-text); font-weight:650; }
.pricing-lifetime .pricing-text-link { margin-top:12px; }
.pricing-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.pricing-plan { border:1px solid var(--pricing-line); border-radius:20px; background:var(--hub-panel); display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.pricing-plan-art { height:166px; flex-shrink:0; position:relative; background:var(--pricing-tone); color:var(--pricing-ink); overflow:hidden; }
.pricing-plan-device { position:absolute; top:36px; left:calc(50% - 45px); width:90px; height:68px; border:1.5px solid var(--pricing-ink); border-radius:12px; background:color-mix(in srgb,var(--pricing-tone) 50%,white); display:grid; place-items:center; box-shadow:0 10px 24px #0001; transform:rotate(-7deg); }
.pricing-plan-device::before { content:''; position:absolute; left:10px; top:8px; width:3px; height:3px; border-radius:50%; background:var(--pricing-ink); box-shadow:6px 0 var(--pricing-ink),12px 0 var(--pricing-ink); opacity:.45; }
.pricing-plan-device .hub-icon { width:30px; height:30px; margin-top:5px; }
.pricing-plan-timeline { display:flex; gap:6px; position:absolute; bottom:25px; left:calc(50% - 67px); }
.pricing-plan-timeline i { width:14px; height:6px; border-radius:4px; background:var(--pricing-ink); opacity:.25; }
.pricing-plan-timeline i:nth-child(-n+3) { opacity:.9; }
.pricing-plan-art-maintained .pricing-plan-device { left:calc(50% - 65px); transform:rotate(3deg); }
.pricing-plan-check { width:30px; height:30px; border:1.5px solid var(--pricing-ink); border-radius:50%; position:absolute; top:94px; left:calc(50% - 7px); display:grid; place-items:center; background:var(--pricing-detail); }
.pricing-plan-checklines { position:absolute; top:50px; left:calc(50% + 40px); }
.pricing-plan-checklines i { display:block; width:32px; height:5px; border-radius:3px; margin:10px 0; background:var(--pricing-ink); opacity:.4; }
.pricing-plan-checklines i:nth-child(2) { width:24px; }
.pricing-power-ring { width:125px; height:125px; border:1px solid var(--pricing-detail); border-radius:50%; position:absolute; top:15px; left:calc(50% - 62px); box-shadow:0 0 0 14px #ffffff28; }
.pricing-plan-art-always .pricing-plan-device { transform:rotate(-3deg); }
.pricing-plan-live { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; font:9px 'Fira Code',monospace; letter-spacing:1px; background:var(--pricing-ink); color:var(--pricing-tone); padding:7px 12px; border-radius:20px; white-space:nowrap; }
.pricing-plan-live i { width:5px; height:5px; background:currentColor; border-radius:50%; }
.pricing-plan-body { padding:26px 23px; display:flex; flex-direction:column; flex:1; }
.pricing-plan h3 { font-size:23px; font-weight:650; letter-spacing:-.75px; margin:12px 0 22px; min-height:56px; line-height:1.2; }
.pricing-plan-price { margin-bottom:22px; }
.pricing-plan-price strong { display:block; font-size:36px; line-height:1.2; font-weight:600; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.pricing-plan-price small { font-size:13px; letter-spacing:0; font-weight:500; color:var(--hub-muted); }
.pricing-plan-price>span { display:block; font-size:11px; color:var(--hub-muted); margin-top:7px; min-height:35px; }
.pricing-plan-body>p:not(.pricing-card-kicker) { font-size:13px; color:var(--hub-muted); line-height:1.85; min-height:75px; }
.pricing-plan ul { list-style:none; padding:22px 0; margin:0; border-top:1px solid var(--pricing-line); margin-top:22px; flex:1; }
.pricing-plan li { font-size:12px; color:var(--hub-muted); line-height:1.8; padding-left:20px; position:relative; margin-bottom:12px; }
.pricing-plan li::before { content:'✓'; position:absolute; left:0; color:var(--hub-accent); }
.pricing-plan-implication { display:flex; align-items:flex-start; gap:10px; border-radius:10px; background:var(--hub-raised); padding:15px; margin-bottom:20px; }
.pricing-plan-implication>svg { width:18px; height:18px; color:var(--hub-accent); margin-top:2px; }
.pricing-plan-implication p { color:var(--hub-muted); font-size:11px; line-height:1.8; }
.pricing-plan-body>.hub-btn { width:100%; margin-top:auto; }
.pricing-plans-caption { display:flex; align-items:flex-start; justify-content:center; gap:10px; color:var(--hub-muted); font-size:12px; line-height:1.8; padding:22px 0; }
.pricing-plans-caption .hub-icon { width:18px; height:18px; color:var(--hub-accent); margin-top:2px; }
.pricing-billing-notes { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--pricing-line); border-radius:16px; overflow:hidden; }
.pricing-billing-notes>div { padding:28px; }
.pricing-billing-notes>div+div { border-left:1px solid var(--pricing-line); }
.pricing-billing-notes h3 { font-size:18px; font-weight:600; margin:16px 0 10px; }
.pricing-billing-notes p { color:var(--hub-muted); font-size:13px; line-height:1.85; }
.pricing-faq { display:grid; grid-template-columns:1fr 1.4fr; gap:7%; border-top:1px solid var(--pricing-line); }
.pricing-faq>div>p:not(.pricing-eyebrow) { color:var(--hub-muted); font-size:14px; line-height:1.85; margin:18px 0; }
.pricing-faq-list details { border-bottom:1px solid var(--pricing-line); }
.pricing-faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:14px; font-weight:550; padding:20px 0; min-height:60px; cursor:pointer; list-style:none; }
.pricing-faq-list summary::-webkit-details-marker { display:none; }
.pricing-faq-list summary::after { content:'+'; color:var(--hub-accent); font:22px 'Fira Code',monospace; }
.pricing-faq-list details[open] summary::after { content:'−'; }
.pricing-faq-list details>p { color:var(--hub-muted); font-size:13px; line-height:1.85; padding:0 20px 24px 0; }
.pricing-finale { position:relative; text-align:center; overflow:hidden; padding:60px 30px; background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--hub-accent) 12%,transparent),transparent 70%),var(--hub-panel); border:1px solid var(--pricing-line); border-radius:24px; }
.pricing-finale-icon { display:grid; place-items:center; color:var(--hub-accent); width:52px; height:52px; border:1px solid var(--pricing-line); border-radius:16px; margin:0 auto 24px; transform:rotate(-8deg); }
.pricing-finale h2 { font-size:clamp(32px,3.6vw,49px); font-weight:650; line-height:1.1; letter-spacing:-1.5px; margin:20px auto; }
.pricing-finale>p:not(.pricing-eyebrow) { color:var(--hub-muted); font-size:14px; line-height:1.85; max-width:520px; margin:auto; }
.pricing-finale .pricing-actions { justify-content:center; }
@media(min-width:1500px) { .pricing-example-app { grid-template-columns:auto 1fr auto; } .pricing-plan-tag { grid-column:auto; } }
@media(max-width:1150px) {
    .pricing-hero { padding:36px 28px; gap:30px; }
    .pricing-hero h1 { font-size:43px; }
    .pricing-art-body { padding:20px; }
    .pricing-art-body h2 { font-size:24px; }
    .pricing-ai-grid { gap:14px; }
    .pricing-ai-card { padding:16px; }
    .pricing-ai-card h3 { font-size:19px; }
    .pricing-plans { grid-template-columns:1fr; }
    .pricing-plan { display:grid; grid-template-columns:180px 1fr; }
    .pricing-plan-art { height:100%; min-height:190px; }
    .pricing-plan-art>* { margin-top:30px; }
    .pricing-plan-timeline { top:115px; bottom:auto; }
    .pricing-plan-live { top:115px; bottom:auto; }
    .pricing-plan-body { padding:25px; }
    .pricing-plan h3, .pricing-plan-body>p:not(.pricing-card-kicker), .pricing-plan-price>span { min-height:0; }
    .pricing-plan h3 { margin-bottom:14px; }
    .pricing-plan ul { padding-bottom:10px; }
    .pricing-plan-price { margin-bottom:16px; }
    .pricing-plan-implication { margin-bottom:16px; }
    .pricing-wallet-strip { flex-wrap:wrap; }
    .pricing-wallet-strip>a { margin-left:62px; }
}
@media(max-width:900px) {
    .pricing-hero { grid-template-columns:1fr; padding:35px 28px; }
    .pricing-hero-art { max-width:390px; width:100%; margin:0 auto; }
    .pricing-hero h1 { font-size:48px; }
    .pricing-section-heading, .pricing-apps-story, .pricing-faq { grid-template-columns:1fr; gap:20px; }
    .pricing-ai-grid { grid-template-columns:1fr; gap:20px; }
    .pricing-ai-card { padding:24px; }
    .pricing-ai-card h3 { font-size:23px; }
    .pricing-ai-art { max-width:100%; height:130px; }
    .pricing-idea-art .pricing-art-icon { left:35%; }
    .pricing-build-art .pricing-module { left:29%; }
    .pricing-build-art .pricing-module:nth-child(2) { left:auto; right:29%; }
    .pricing-bubble { left:32%; }
    .pricing-bubble.reply { right:30%; }
    .pricing-app-stack { margin-top:14px; }
    .pricing-lifetime { grid-template-columns:100px 1fr; gap:25px; padding:25px; }
    .pricing-life-symbol { padding:18px 10px; }
    .pricing-life-symbol strong { font-size:50px; }
    .pricing-lifetime h2 { font-size:25px; }
    .pricing-section { padding:48px 0; }
}
@media(max-width:600px) {
    .pricing-hero { padding:30px 22px; border-radius:20px; }
    .pricing-hero h1 { font-size:40px; letter-spacing:-1.8px; }
    .pricing-hero .pricing-eyebrow { font-size:10px; }
    .pricing-lead { font-size:14px; }
    .pricing-actions { gap:10px; }
    .pricing-art-body h2 { font-size:25px; }
    .pricing-art-floating { margin-left:5%; padding:14px; }
    .pricing-nav { gap:0 22px; padding:12px 0; }
    .pricing-nav a { font-size:11px; }
    .pricing-section h2 { font-size:29px; }
    .pricing-section-heading { gap:6px; }
    .pricing-wallet-strip { padding:20px; gap:14px; }
    .pricing-wallet-strip>div { flex-basis:calc(100% - 60px); }
    .pricing-wallet-strip>a { margin-left:0; }
    .pricing-app-stack { padding:22px 15px; }
    .pricing-example-app { padding:14px; }
    .pricing-lifetime { grid-template-columns:1fr; gap:22px; padding:24px; }
    .pricing-life-symbol { width:100%; flex-direction:row; justify-content:center; gap:18px; padding:16px; }
    .pricing-life-symbol strong { line-height:1; }
    .pricing-life-symbol span { margin-top:10px; }
    .pricing-plan { display:flex; }
    .pricing-plan-art { min-height:0; height:160px; }
    .pricing-plan-art>* { margin-top:0; }
    .pricing-plan-body { padding:26px; }
    .pricing-plan-timeline { top:auto; bottom:25px; }
    .pricing-plan-live { top:auto; bottom:20px; }
    .pricing-billing-notes { grid-template-columns:1fr; }
    .pricing-billing-notes>div { padding:24px; }
    .pricing-billing-notes>div+div { border-left:0; border-top:1px solid var(--pricing-line); }
    .pricing-finale { padding:40px 22px; }
    .pricing-finale h2 { font-size:34px; }
    .pricing-idea-art .pricing-art-icon { left:23%; }
    .pricing-build-art .pricing-module { left:15%; }
    .pricing-build-art .pricing-module:nth-child(2) { right:15%; }
    .pricing-bubble { left:20%; }
    .pricing-bubble.reply { right:17%; }
}