.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.check-field input:focus-visible+.fake-check{outline:3px solid rgba(108,92,231,.2);outline-offset:2px}
.builder-hero{padding:64px 0 44px;text-align:center}.breadcrumbs{margin-bottom:20px;color:var(--muted);font-size:.82rem}.breadcrumbs a{color:var(--primary);font-weight:800}.breadcrumbs span{margin:0 7px}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(108,92,231,.15);border-radius:999px;color:var(--primary-dark);background:rgba(255,255,255,.76);box-shadow:0 8px 25px rgba(108,92,231,.08);font-size:.82rem;font-weight:800}.hero-badge span{color:#f0a12c}.builder-hero h1{margin:18px auto 16px;font-size:clamp(2.75rem,7vw,5rem)}.jump-link{display:inline-flex;align-items:center;gap:9px;margin-top:25px;color:var(--primary);font-size:.88rem;font-weight:850}.jump-link span{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:rgba(108,92,231,.1)}
.builder-section{padding:10px 0 78px}.builder-shell{overflow:hidden;border:1px solid rgba(38,35,78,.12);border-radius:29px;background:rgba(255,255,255,.91);box-shadow:0 30px 90px rgba(55,47,126,.17)}.builder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;padding:12px 18px;border-bottom:1px solid var(--border);background:rgba(247,247,253,.88)}.toolbar-title,.toolbar-actions{display:flex;align-items:center;gap:10px}.toolbar-title strong{font-size:.92rem}.toolbar-title>span:last-child{padding-left:10px;border-left:1px solid var(--border);color:var(--muted);font-size:.78rem;font-weight:750}.live-dot,.privacy-dot{width:8px;height:8px;border-radius:50%;background:#14b89c;box-shadow:0 0 0 5px rgba(20,184,156,.1)}.subtle-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:11px;color:#4b4d64;background:#fff;font-size:.78rem;font-weight:850;transition:.2s}.subtle-button:hover{color:var(--primary);border-color:rgba(108,92,231,.3);transform:translateY(-1px)}.subtle-button.primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--primary),#8575f1);box-shadow:0 8px 22px rgba(108,92,231,.22)}.builder-workspace{display:grid;grid-template-columns:370px minmax(0,1fr);min-height:720px}.editor-panel{border-right:1px solid var(--border);background:#fff}.editor-section{padding:21px 22px;border-bottom:1px solid var(--border)}.editor-section:last-child{border-bottom:0}.section-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:17px}.section-row>div{display:flex;align-items:center;gap:9px}.section-row h3,.code-heading-row h3{margin:0;font-size:.92rem;letter-spacing:-.01em}.step-label{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:9px;color:var(--primary);background:rgba(108,92,231,.09);font-size:.66rem;font-weight:900}.icon-button{display:grid;width:31px;height:31px;place-items:center;border:1px solid rgba(108,92,231,.18);border-radius:9px;color:var(--primary);background:#f8f6ff;font-size:1.2rem;line-height:1;transition:.2s}.icon-button:hover{color:#fff;background:var(--primary)}.icon-button:disabled{cursor:not-allowed;opacity:.4}.plan-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 1px 5px;scrollbar-width:thin}.plan-tab{min-width:0;padding:9px 12px;border:1px solid var(--border);border-radius:10px;color:#74768a;background:#fff;font-size:.74rem;font-weight:800;white-space:nowrap;transition:.2s}.plan-tab:hover{color:var(--primary)}.plan-tab.active{color:#fff;border-color:var(--primary);background:var(--primary);box-shadow:0 7px 17px rgba(108,92,231,.2)}.save-state{padding:5px 8px;border-radius:999px;color:#148876;background:rgba(20,184,156,.08);font-size:.64rem;font-weight:850}.form-fields{display:grid;gap:12px}.input-field{display:grid;gap:6px}.input-field>span,.color-field>span:first-child,.range-field>span:first-child,.theme-fieldset legend{color:#5c5f74;font-size:.71rem;font-weight:800}.input-field small{margin-left:4px;color:#a2a4b2;font-weight:650}.input-field input,.input-field textarea{width:100%;padding:10px 11px;border:1px solid rgba(31,34,62,.12);border-radius:10px;color:var(--text);background:#fbfbfe;outline:none;font-size:.79rem;transition:.2s}.input-field input{height:40px}.input-field textarea{min-height:104px;resize:vertical;line-height:1.55}.input-field input:focus,.input-field textarea:focus{border-color:rgba(108,92,231,.6);background:#fff;box-shadow:0 0 0 3px rgba(108,92,231,.08)}.split-fields{display:grid;grid-template-columns:.65fr 1fr 1.15fr;gap:8px}.check-field{position:relative;display:flex;align-items:flex-start;gap:10px;padding:11px;border:1px solid rgba(31,34,62,.1);border-radius:11px;background:#fbfbfe;cursor:pointer}.check-field input{position:absolute;opacity:0;pointer-events:none}.fake-check{position:relative;width:19px;height:19px;flex:0 0 auto;border:1.5px solid #c3c3d0;border-radius:6px;background:#fff;transition:.2s}.check-field input:checked+.fake-check{border-color:var(--primary);background:var(--primary)}.check-field input:checked+.fake-check:after{content:"";position:absolute;top:3px;left:6px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.check-field strong,.check-field small{display:block}.check-field strong{font-size:.73rem}.check-field small{margin-top:3px;color:var(--muted);font-size:.64rem}.remove-plan{margin-top:12px;padding:0;border:0;color:#ad6670;background:transparent;font-size:.69rem;font-weight:800}.remove-plan:hover{color:#d53d50}.remove-plan:disabled{visibility:hidden}.theme-fieldset{padding:0;margin:0 0 17px;border:0}.theme-fieldset legend{margin-bottom:8px}.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.theme-swatch{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 7px;border:1px solid var(--border);border-radius:10px;color:#65687b;background:#fff;font-size:.66rem;font-weight:800}.theme-swatch span{width:12px;height:12px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 3px color-mix(in srgb,var(--swatch) 14%,transparent)}.theme-swatch.active{color:var(--primary);border-color:rgba(108,92,231,.35);background:#f8f6ff}.style-controls{display:grid;gap:15px}.color-field,.range-field{display:grid;gap:8px}.color-control{display:flex;align-items:center;gap:9px;height:40px;padding:5px 10px 5px 6px;border:1px solid rgba(31,34,62,.12);border-radius:10px;background:#fbfbfe}.color-control input{width:30px;height:28px;padding:0;border:0;border-radius:7px;background:transparent}.color-control output{color:#5e6075;font:700 .71rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}.range-field>span{display:flex;justify-content:space-between}.range-field output{color:var(--primary);font-size:.68rem;font-weight:800}.range-field input{width:100%;accent-color:var(--primary)}.check-field.compact{align-items:center;padding:9px 10px}.check-field.compact strong{font-size:.7rem}
.preview-panel{display:flex;min-width:0;flex-direction:column;background:#f4f4fa}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:76px;padding:15px 20px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.72)}.preview-toolbar>div:first-child span,.preview-toolbar>div:first-child strong{display:block}.preview-kicker{margin-bottom:3px;color:var(--primary);font-size:.63rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.preview-toolbar strong{font-size:.84rem}.device-switch{display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:11px;background:#fff}.device-switch button{display:grid;width:35px;height:30px;place-items:center;border:0;border-radius:8px;color:#8c8e9f;background:transparent}.device-switch button.active{color:var(--primary);background:rgba(108,92,231,.1)}.device-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.preview-canvas{position:relative;display:grid;flex:1;min-height:590px;padding:45px 28px;overflow:hidden;place-items:center;background-color:#f6f7fb;background-image:linear-gradient(rgba(108,92,231,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(108,92,231,.035) 1px,transparent 1px);background-size:22px 22px}.canvas-glow{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.glow-one{width:310px;height:310px;top:-140px;right:-80px;background:rgba(108,92,231,.09)}.glow-two{width:260px;height:260px;bottom:-120px;left:-80px;background:rgba(0,194,168,.07)}.pricing-preview{position:relative;z-index:1;display:grid;width:100%;max-width:780px;grid-template-columns:repeat(var(--plan-count,3),minmax(0,1fr));gap:12px;align-items:stretch;transition:max-width .35s ease}.preview-canvas.mobile .pricing-preview{max-width:340px;grid-template-columns:1fr}.price-card{position:relative;display:flex;min-width:0;padding:23px 18px 19px;flex-direction:column;border:1px solid #e2e3eb;border-radius:var(--card-radius,20px);background:#fff;box-shadow:0 14px 35px rgba(39,42,73,.08);transition:transform .25s,border-color .25s,box-shadow .25s}.price-card:hover{transform:translateY(-3px)}.price-card.recommended{z-index:2;border:2px solid var(--table-accent,#6c5ce7);box-shadow:0 18px 45px color-mix(in srgb,var(--table-accent,#6c5ce7) 20%,transparent);transform:translateY(-7px)}.price-card.recommended:hover{transform:translateY(-10px)}.popular-badge{position:absolute;top:-13px;left:50%;padding:6px 11px;border-radius:999px;color:#fff;background:var(--table-accent,#6c5ce7);box-shadow:0 6px 16px color-mix(in srgb,var(--table-accent,#6c5ce7) 28%,transparent);font-size:.57rem;font-weight:900;letter-spacing:.055em;text-transform:uppercase;transform:translateX(-50%);white-space:nowrap}.plan-name{margin:0 0 8px;font-size:.72rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.plan-desc{min-height:38px;margin:0 0 17px;color:#777a8d;font-size:.66rem;line-height:1.5}.price-line{display:flex;align-items:flex-start;margin-bottom:19px}.currency{margin:7px 2px 0 0;color:#4c4e61;font-size:.83rem;font-weight:800}.price{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:900;line-height:1;letter-spacing:-.06em}.period{align-self:flex-end;margin:0 0 4px 4px;color:#8b8d9c;font-size:.61rem}.feature-list{display:grid;gap:10px;padding:17px 0 0;margin:0 0 22px;border-top:1px solid #ececf2;list-style:none}.feature-list li{display:flex;gap:7px;color:#55586a;font-size:.66rem;line-height:1.35}.feature-list li:before{content:"✓";display:grid;width:15px;height:15px;flex:0 0 auto;place-items:center;border-radius:50%;color:var(--table-accent,#6c5ce7);background:color-mix(in srgb,var(--table-accent,#6c5ce7) 10%,white);font-size:.55rem;font-weight:900}.pricing-preview.equal-height .feature-list{flex:1}.plan-button{display:flex;min-height:38px;align-items:center;justify-content:center;padding:0 10px;border:1px solid color-mix(in srgb,var(--table-accent,#6c5ce7) 40%,white);border-radius:calc(var(--card-radius,20px) * .55);color:var(--table-accent,#6c5ce7);background:color-mix(in srgb,var(--table-accent,#6c5ce7) 6%,white);font-size:.67rem;font-weight:900}.recommended .plan-button{color:#fff;border-color:var(--table-accent,#6c5ce7);background:var(--table-accent,#6c5ce7);box-shadow:0 7px 16px color-mix(in srgb,var(--table-accent,#6c5ce7) 24%,transparent)}.preview-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:49px;padding:10px 20px;border-top:1px solid var(--border);color:#858797;background:rgba(255,255,255,.78);font-size:.65rem;font-weight:750}.preview-foot span:first-child{display:flex;align-items:center;gap:9px}.privacy-dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(20,184,156,.09)}
.code-section{border-top:1px solid var(--border);background:#fff}.code-heading-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 23px}.code-heading-row>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:9px}.code-heading-row .step-label{grid-row:1/3}.code-heading-row p{grid-column:2;margin:3px 0 0;color:var(--muted);font-size:.69rem}.code-actions{display:flex;gap:8px}.code-output{max-height:310px;padding:22px;margin:0;overflow:auto;color:#d7d8ee;background:#191a2b;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;tab-size:2}.toast{position:fixed;z-index:80;right:24px;bottom:24px;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid rgba(20,184,156,.22);border-radius:13px;color:#087f70;background:#f5fffc;box-shadow:0 18px 45px rgba(37,50,85,.18);font-size:.78rem;font-weight:850;opacity:0;pointer-events:none;transform:translateY(15px);transition:.25s}.toast.show{opacity:1;transform:translateY(0)}.toast>span:first-child{display:grid;width:22px;height:22px;place-items:center;border-radius:50%;color:#fff;background:#14b89c}
.content-section{padding:75px 0}.content-section.soft{border-block:1px solid rgba(31,34,62,.06);background:rgba(255,255,255,.45)}.content{max-width:980px}.section-tag{display:inline-block;margin-bottom:10px;color:var(--primary);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.content h2{margin:0 0 13px;font-size:clamp(1.85rem,4vw,2.75rem);letter-spacing:-.045em}.section-intro,.try-head p{margin:0;color:var(--muted);line-height:1.7}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:30px}.step-card{padding:25px;border:1px solid var(--border);border-radius:20px;background:#fff}.step-card>span{display:grid;width:35px;height:35px;margin-bottom:17px;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),#897af0);font-size:.71rem;font-weight:900}.step-card h3{margin:0 0 8px;font-size:1rem}.step-card p,.content-split p,.benefit-list p,.faq p{color:var(--muted);font-size:.86rem;line-height:1.7}.step-card p,.benefit-list p{margin:0}.content-split{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}.content-split>div>p{margin:0}.content-split>div>p+p{margin-top:13px}.benefit-list{display:grid;gap:12px;padding:0;margin:0;list-style:none}.benefit-list li{display:flex;gap:12px;padding:17px;border:1px solid var(--border);border-radius:16px;background:#fff}.benefit-list li>span{display:grid;width:27px;height:27px;flex:0 0 auto;place-items:center;border-radius:9px;color:#078475;background:rgba(0,194,168,.1);font-weight:900}.benefit-list strong{font-size:.87rem}.benefit-list p{margin-top:4px;font-size:.76rem}.faq{display:grid;gap:10px;margin-top:25px}.faq details{overflow:hidden;border:1px solid var(--border);border-radius:15px;background:#fff}.faq summary{position:relative;padding:18px 50px 18px 19px;cursor:pointer;font-size:.87rem;font-weight:850;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;top:50%;right:18px;color:var(--primary);font-size:1.25rem;transform:translateY(-50%)}.faq details[open] summary:after{content:"−"}.faq p{padding:0 19px 18px;margin:0}.try-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.try-head h2{margin-bottom:8px}.see-all{color:var(--primary);font-size:.85rem;font-weight:850;white-space:nowrap}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:27px}.try-card{display:flex;align-items:center;gap:12px;padding:18px;border:1px solid var(--border);border-radius:17px;background:#fff;transition:.22s}.try-card:hover{transform:translateY(-3px);border-color:rgba(108,92,231,.3);box-shadow:0 15px 32px rgba(53,49,110,.09)}.try-icon{display:grid;width:43px;height:43px;flex:0 0 auto;place-items:center;border-radius:12px;color:var(--primary);background:rgba(108,92,231,.09);font-size:.66rem;font-weight:900}.try-card>span:nth-child(2){min-width:0}.try-card strong,.try-card small{display:block}.try-card strong{font-size:.8rem}.try-card small{margin-top:4px;color:var(--muted);font-size:.66rem;line-height:1.45}.try-arrow{margin-left:auto;color:var(--primary)}
@media(max-width:1020px){.builder-workspace{grid-template-columns:330px minmax(0,1fr)}.pricing-preview{grid-template-columns:repeat(2,minmax(0,1fr));max-width:580px}.price-card.recommended{transform:none}.price-card.recommended:hover{transform:translateY(-3px)}}@media(max-width:820px){.builder-workspace{grid-template-columns:1fr}.editor-panel{border-right:0;border-bottom:1px solid var(--border)}.preview-canvas{min-height:560px}.pricing-preview{grid-template-columns:repeat(var(--plan-count,3),minmax(210px,1fr));max-width:none;overflow-x:auto;padding:16px 2px}.price-card{min-width:210px}.content-split{grid-template-columns:1fr;gap:30px}.steps,.try-grid{grid-template-columns:1fr}}@media(max-width:640px){.builder-hero{padding:45px 0 34px}.builder-hero h1{font-size:clamp(2.55rem,14vw,4rem)}.builder-section{padding-bottom:55px}.builder-shell{border-radius:22px}.builder-toolbar{align-items:flex-start;padding:12px}.toolbar-title>span:last-child{display:none}.toolbar-actions{gap:6px}.toolbar-actions .subtle-button{padding:0 10px}.editor-section{padding:19px 16px}.split-fields{grid-template-columns:.7fr 1fr 1.2fr}.preview-toolbar,.preview-foot{padding-inline:15px}.preview-canvas{min-height:535px;padding:30px 14px}.pricing-preview{grid-template-columns:1fr;max-width:340px;overflow:visible}.code-heading-row{align-items:flex-start;flex-direction:column}.code-actions{width:100%}.code-actions .subtle-button{flex:1}.code-output{font-size:10.5px}.content-section{padding:55px 0}.try-head{align-items:flex-start;flex-direction:column}.toast{right:10px;bottom:10px;left:10px;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}