.website-builder-page{padding-bottom:80px}
.website-builder-page .tool-hero{max-width:860px}
.website-builder-page .tool-hero .intro{max-width:780px}

.wb-layout{
 display:grid;
 grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);
 gap:26px;
 align-items:start;
 margin-top:26px;
}
.wb-panel{
 margin:0!important;
 background:#fff;
 border:1px solid #e2e7f0;
 border-radius:26px;
 box-shadow:0 18px 60px rgba(32,52,108,.07);
 padding:26px;
}
.wb-panel-head{margin-bottom:20px}
.wb-panel-head h2{
 margin:0 0 7px;
 color:#172852;
 font:800 20px/1.25 'Manrope',sans-serif;
 letter-spacing:-.45px;
}
.wb-panel-head p{margin:0;color:#66758e;font-size:13px;line-height:1.65}

.wb-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.wb-form .ui-field{margin:0}
.wb-span-2{grid-column:1/-1}
.wb-form textarea{min-height:104px;resize:vertical}

.wb-style-field{
 grid-column:1/-1;
 border:0;
 padding:0;
 margin:2px 0 0;
 min-width:0;
}
.wb-style-field legend{
 margin-bottom:9px;
 color:#44526a;
 font-size:13px;
 font-weight:800;
}
.wb-style-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.wb-style-card{
 position:relative;
 display:block;
 min-width:0;
 cursor:pointer;
}
.wb-style-card input{position:absolute;opacity:0;pointer-events:none}
.wb-style-card-body{
 display:block;
 padding:8px;
 border:1px solid #dfe5f0;
 border-radius:13px;
 background:#fafbff;
 transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;
}
.wb-style-card:hover .wb-style-card-body{transform:translateY(-1px);border-color:#c6d0eb}
.wb-style-card input:checked+.wb-style-card-body{
 border-color:#6979f4;
 background:#fff;
 box-shadow:0 0 0 3px rgba(86,103,243,.11);
}
.wb-style-card strong{
 display:block;
 margin-top:7px;
 color:#2d3d5e;
 font-size:10.5px;
 line-height:1.2;
 text-align:center;
}
.wb-style-thumb{
 display:block;
 position:relative;
 height:42px;
 overflow:hidden;
 border-radius:8px;
 border:1px solid #e3e7ef;
 background:#f4f7ff;
}
.wb-style-thumb::before,
.wb-style-thumb::after{
 content:"";
 position:absolute;
 border-radius:3px;
}
.wb-style-thumb::before{left:7px;top:8px;width:44%;height:8px;background:#bcc7f7}
.wb-style-thumb::after{left:7px;top:22px;width:62%;height:12px;background:#e6eaff}
.wb-style-card[data-style="modern"] .wb-style-thumb{background:linear-gradient(145deg,#eef3ff,#fff)}
.wb-style-card[data-style="minimal"] .wb-style-thumb{background:#fff;border-color:#cfd4dc}
.wb-style-card[data-style="minimal"] .wb-style-thumb::before,
.wb-style-card[data-style="minimal"] .wb-style-thumb::after{background:#c8cdd5}
.wb-style-card[data-style="bold"] .wb-style-thumb{background:#24153c;border-color:#3b2457}
.wb-style-card[data-style="bold"] .wb-style-thumb::before{background:#ffb86b}
.wb-style-card[data-style="bold"] .wb-style-thumb::after{background:#7c3aed}
.wb-style-card[data-style="elegant"] .wb-style-thumb{background:#fbf7f1;border-color:#e3d4c0}
.wb-style-card[data-style="elegant"] .wb-style-thumb::before{background:#a77844}
.wb-style-card[data-style="elegant"] .wb-style-thumb::after{background:#ebdfd0}
.wb-style-card[data-style="professional"] .wb-style-thumb{background:#eef8fa;border-color:#c8e2e7}
.wb-style-card[data-style="professional"] .wb-style-thumb::before{background:#13677b}
.wb-style-card[data-style="professional"] .wb-style-thumb::after{background:#cfecef}

.wb-services-field{
 grid-column:1/-1;
 border:0;
 padding:0;
 margin:2px 0 0;
 min-width:0;
}
.wb-services-field legend{
 margin-bottom:9px;
 color:#44526a;
 font-size:13px;
 font-weight:800;
}
.wb-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.wb-services-grid label{display:grid;gap:6px;color:#71809a;font-size:10.5px;font-weight:800}
.wb-services-grid input{
 width:100%;
 box-sizing:border-box;
 border:1px solid #dce4f1;
 border-radius:11px;
 background:#fafbff;
 color:#12203b;
 padding:12px;
 font:inherit;
}
.wb-services-grid input:focus{outline:0;border-color:#7886fa;box-shadow:0 0 0 4px #4c66f71a}

.wb-form-actions{
 grid-column:1/-1;
 display:grid;
 grid-template-columns:minmax(0,1fr);
 gap:10px;
 margin-top:2px;
}
.wb-premium-button{
 width:100%;
 min-height:50px;
 margin-top:13px;
 border:1px solid #d8def0;
 border-radius:12px;
 background:linear-gradient(180deg,#f8f9fc,#f1f3f8);
 color:#7b869a;
 font:800 13px 'DM Sans',system-ui,sans-serif;
 cursor:not-allowed;
}
.wb-premium-note{margin:9px 2px 0;color:#8a95a8;font-size:10.5px;line-height:1.5}

.wb-preview-shell{
 position:sticky;
 top:24px;
 border:1px solid #dfe5ef;
 border-radius:26px;
 background:#edf1f7;
 padding:13px;
 box-shadow:0 18px 60px rgba(32,52,108,.07);
}
.wb-preview-toolbar{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
 min-height:36px;
 padding:0 3px 10px;
 color:#68768e;
 font-size:11.5px;
 font-weight:800;
}
.wb-preview-controls{display:flex;align-items:center;gap:6px}
.wb-device-button{
 display:grid;
 place-items:center;
 width:30px;
 height:27px;
 border:1px solid transparent;
 border-radius:8px;
 background:transparent;
 color:#8490a2;
 font-size:14px;
 cursor:pointer;
}
.wb-device-button:hover{background:#e5eaf2;color:#54627a}
.wb-device-button.is-active{background:#fff;border-color:#dfe5ef;color:#465ae0;box-shadow:0 3px 10px rgba(36,54,100,.06)}
.wb-preview-frame{
 min-height:650px;
 overflow:auto;
 border:1px solid #e1e6ef;
 border-radius:17px;
 background:#dfe5ee;
 padding:0;
 transition:padding .22s;
}
.wb-preview[data-device="mobile"]{
 width:min(390px,calc(100% - 28px));
 margin:18px auto;
 box-shadow:0 20px 48px rgba(30,43,75,.12);
 border-radius:24px;
 overflow:hidden;
}
.wb-preview[data-device="desktop"]{width:100%}

.wb-site{
 --wb-accent:#5368ed;
 --wb-soft:#edf2ff;
 min-height:648px;
 background:#fff;
 color:#17233d;
 font-family:Inter,system-ui,sans-serif;
}
.wb-site-nav{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 min-height:64px;
 padding:0 28px;
 border-bottom:1px solid #edf0f5;
 background:rgba(255,255,255,.92);
}
.wb-site-nav strong{font:800 15px 'Manrope',sans-serif;letter-spacing:-.25px}
.wb-site-nav nav{display:flex;gap:17px;color:#77849a;font-size:10.5px}
.wb-site-location{color:#77849a;font-size:10.5px;white-space:nowrap}

.wb-site-hero{
 display:grid;
 grid-template-columns:minmax(0,1.04fr) minmax(180px,.96fr);
 gap:34px;
 align-items:center;
 min-height:360px;
 padding:58px 40px;
 background:linear-gradient(145deg,var(--wb-soft),#fff 68%);
}
.wb-site-kicker{
 display:inline-block;
 color:var(--wb-accent);
 font-size:10px;
 font-weight:900;
 letter-spacing:.11em;
 text-transform:uppercase;
}
.wb-site-hero h2{
 margin:13px 0 13px;
 color:inherit;
 font:800 clamp(34px,4.2vw,52px)/1.03 'Manrope',sans-serif;
 letter-spacing:-2.2px;
}
.wb-site-hero p{
 max-width:520px;
 margin:0 0 24px;
 color:#68758c;
 font-size:13.5px;
 line-height:1.72;
}
.wb-site-hero button{
 border:0;
 border-radius:11px;
 background:var(--wb-accent);
 color:#fff;
 padding:13px 17px;
 font-weight:850;
}
.wb-site-visual{position:relative;min-height:235px}
.wb-visual-shape{position:absolute;border-radius:999px;filter:blur(.1px)}
.wb-visual-shape-a{width:190px;height:190px;right:22px;top:15px;background:linear-gradient(145deg,var(--wb-accent),#a6b3ff);opacity:.9}
.wb-visual-shape-b{width:86px;height:86px;left:7px;bottom:10px;background:var(--wb-soft);border:1px solid #fff}
.wb-visual-card{
 position:absolute;
 display:block;
 background:rgba(255,255,255,.94);
 border:1px solid rgba(255,255,255,.78);
 border-radius:18px;
 box-shadow:0 20px 50px rgba(28,42,81,.16);
}
.wb-visual-card-a{width:116px;height:80px;right:7px;top:25px;transform:rotate(5deg)}
.wb-visual-card-b{width:142px;height:92px;left:18px;bottom:16px;transform:rotate(-5deg)}

.wb-site-section{padding:34px 40px;border-top:1px solid #edf0f5}
.wb-section-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.wb-section-heading>span{
 display:grid;
 place-items:center;
 width:29px;
 height:29px;
 border-radius:9px;
 background:var(--wb-soft);
 color:var(--wb-accent);
 font-size:9px;
 font-weight:900;
}
.wb-section-heading h3{margin:0;font:800 18px 'Manrope',sans-serif;letter-spacing:-.35px}
.wb-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wb-service-grid article{
 min-width:0;
 padding:17px;
 border:1px solid #e7eaf1;
 border-radius:14px;
 background:#fafbfc;
}
.wb-service-grid article>span{display:block;margin-bottom:14px;color:var(--wb-accent);font-size:9px;font-weight:900}
.wb-service-grid strong{display:block;font-size:12.5px;line-height:1.35}
.wb-service-grid p{margin:6px 0 0;color:#8490a2;font-size:10px}
.wb-site-about{display:grid;grid-template-columns:.72fr 1.28fr;gap:24px}
.wb-about-copy strong{font:800 16px 'Manrope',sans-serif}
.wb-about-copy p{margin:8px 0 9px;color:#69768c;font-size:12.5px;line-height:1.7}
.wb-about-copy small{color:#8a95a7}
.wb-contact-card{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 padding:18px 20px;
 border-radius:15px;
 background:var(--wb-soft);
}
.wb-contact-card div{display:grid;gap:3px}
.wb-contact-card small{color:#75839a;font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.wb-contact-card strong{font-size:13px}
.wb-contact-card>span{color:#5f6d84;font-size:11px;text-align:right}

/* Distinct visual systems */
.wb-preview[data-style="minimal"] .wb-site{--wb-accent:#111;--wb-soft:#f7f7f7;font-family:Arial,Helvetica,sans-serif}
.wb-preview[data-style="minimal"] .wb-site-nav{border-bottom:1px solid #161616}
.wb-preview[data-style="minimal"] .wb-site-hero{display:block;min-height:0;padding:76px 44px;background:#fff;border-bottom:1px solid #161616}
.wb-preview[data-style="minimal"] .wb-site-hero-copy{max-width:610px}
.wb-preview[data-style="minimal"] .wb-site-visual{display:none}
.wb-preview[data-style="minimal"] .wb-site-hero h2{color:#111;font-size:54px;letter-spacing:-3px}
.wb-preview[data-style="minimal"] .wb-site-hero button{border-radius:0;background:#111}
.wb-preview[data-style="minimal"] .wb-site-section{border-top:0;border-bottom:1px solid #161616}
.wb-preview[data-style="minimal"] .wb-service-grid{gap:0;border:1px solid #161616}
.wb-preview[data-style="minimal"] .wb-service-grid article{border:0;border-right:1px solid #161616;border-radius:0;background:#fff}
.wb-preview[data-style="minimal"] .wb-service-grid article:last-child{border-right:0}

.wb-preview[data-style="bold"] .wb-site{--wb-accent:#ffb86b;--wb-soft:#311c4d;background:#1d1230;color:#fff}
.wb-preview[data-style="bold"] .wb-site-nav{background:#1d1230;border-bottom-color:#ffffff1a}
.wb-preview[data-style="bold"] .wb-site-nav nav,.wb-preview[data-style="bold"] .wb-site-location{color:#cdbbe2}
.wb-preview[data-style="bold"] .wb-site-hero{background:radial-gradient(circle at 82% 20%,#8b5cf655,transparent 34%),linear-gradient(145deg,#2a1747,#1d1230)}
.wb-preview[data-style="bold"] .wb-site-hero p{color:#d7c7e8}
.wb-preview[data-style="bold"] .wb-site-hero button{color:#2b173d}
.wb-preview[data-style="bold"] .wb-visual-shape-a{background:linear-gradient(145deg,#7c3aed,#ffb86b)}
.wb-preview[data-style="bold"] .wb-site-section{background:#241638;border-top-color:#ffffff12}
.wb-preview[data-style="bold"] .wb-service-grid article{background:#301c48;border-color:#ffffff14}
.wb-preview[data-style="bold"] .wb-service-grid p,.wb-preview[data-style="bold"] .wb-about-copy p,.wb-preview[data-style="bold"] .wb-about-copy small{color:#c8b5dc}
.wb-preview[data-style="bold"] .wb-contact-card{background:#6d28d9}
.wb-preview[data-style="bold"] .wb-contact-card small,.wb-preview[data-style="bold"] .wb-contact-card>span{color:#eadfff}

.wb-preview[data-style="elegant"] .wb-site{--wb-accent:#966936;--wb-soft:#efe4d6;background:#fbf7f1;color:#2d261f;font-family:Georgia,'Times New Roman',serif}
.wb-preview[data-style="elegant"] .wb-site-nav{background:#fbf7f1;border-bottom-color:#dfd1bf}
.wb-preview[data-style="elegant"] .wb-site-hero{display:block;min-height:0;padding:78px 50px;text-align:center;background:#fbf7f1}
.wb-preview[data-style="elegant"] .wb-site-hero-copy{max-width:680px;margin:auto}
.wb-preview[data-style="elegant"] .wb-site-visual{display:none}
.wb-preview[data-style="elegant"] .wb-site-hero h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-1px}
.wb-preview[data-style="elegant"] .wb-site-hero p{margin-left:auto;margin-right:auto;color:#756654}
.wb-preview[data-style="elegant"] .wb-site-hero button{border:1px solid #966936;border-radius:999px;background:transparent;color:#6d4c28}
.wb-preview[data-style="elegant"] .wb-site-section{background:#fffaf4;border-top-color:#e9dece}
.wb-preview[data-style="elegant"] .wb-section-heading{justify-content:center}
.wb-preview[data-style="elegant"] .wb-service-grid article{background:#fbf7f1;border-color:#e9dece;text-align:center}

.wb-preview[data-style="professional"] .wb-site{--wb-accent:#12677b;--wb-soft:#ddf1f5;background:#f7fbfc;color:#173241}
.wb-preview[data-style="professional"] .wb-site-nav{background:#0f5366;color:#fff;border:0}
.wb-preview[data-style="professional"] .wb-site-nav nav,.wb-preview[data-style="professional"] .wb-site-location{color:#d5edf2}
.wb-preview[data-style="professional"] .wb-site-hero{background:linear-gradient(90deg,#eaf7f9 0 62%,#d6eef2 62%)}
.wb-preview[data-style="professional"] .wb-visual-shape-a{border-radius:28px;background:linear-gradient(160deg,#12677b,#8ed3de)}
.wb-preview[data-style="professional"] .wb-visual-card{border-radius:10px}
.wb-preview[data-style="professional"] .wb-site-section{background:#fff;border-top-color:#dcecef}
.wb-preview[data-style="professional"] .wb-service-grid article{background:#f4fafb;border-color:#d9ebee}

/* Mobile preview forces its own compact site layout */
.wb-preview[data-device="mobile"] .wb-site-nav{padding:0 18px;min-height:56px}
.wb-preview[data-device="mobile"] .wb-site-nav nav{display:none}
.wb-preview[data-device="mobile"] .wb-site-location{display:none}
.wb-preview[data-device="mobile"] .wb-site-hero{grid-template-columns:1fr;gap:20px;min-height:0;padding:42px 22px 34px}
.wb-preview[data-device="mobile"] .wb-site-hero h2{font-size:38px!important;letter-spacing:-1.8px}
.wb-preview[data-device="mobile"] .wb-site-visual{min-height:165px}
.wb-preview[data-device="mobile"] .wb-site-section{padding:27px 22px}
.wb-preview[data-device="mobile"] .wb-service-grid{grid-template-columns:1fr}
.wb-preview[data-device="mobile"] .wb-site-about{grid-template-columns:1fr}
.wb-preview[data-device="mobile"] .wb-contact-card{align-items:flex-start;flex-direction:column}
.wb-preview[data-device="mobile"] .wb-contact-card>span{text-align:left}
.wb-preview[data-device="mobile"][data-style="minimal"] .wb-site-hero,
.wb-preview[data-device="mobile"][data-style="elegant"] .wb-site-hero{padding:46px 22px 40px}
.wb-preview[data-device="mobile"][data-style="minimal"] .wb-service-grid{display:block}
.wb-preview[data-device="mobile"][data-style="minimal"] .wb-service-grid article{border-right:0;border-bottom:1px solid #161616}

/* Standardized explanatory block extension */
.wb-info-card{margin-top:30px}
.wb-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.wb-info-grid div{padding:15px 16px;border:1px solid #dfe6f5;border-radius:14px;background:rgba(255,255,255,.62)}
.wb-info-grid strong{display:block;margin-bottom:5px;color:#253960;font-size:12px}
.wb-info-grid span{color:#617087;font-size:12.5px;line-height:1.55}

@media(max-width:1050px){
 .wb-layout{grid-template-columns:1fr}
 .wb-preview-shell{position:static}
 .wb-style-grid{grid-template-columns:repeat(5,minmax(92px,1fr))}
}
@media(max-width:760px){
 .wb-style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .wb-info-grid{grid-template-columns:1fr}
}
@media(max-width:550px){
 .website-builder-page{padding-bottom:60px}
 .wb-panel{padding:18px;border-radius:19px}
 .wb-form{grid-template-columns:1fr;gap:13px}
 .wb-span-2,.wb-style-field,.wb-services-field,.wb-form-actions{grid-column:auto}
 .wb-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wb-services-grid{grid-template-columns:1fr}
 .wb-preview-shell{padding:9px;border-radius:19px}
 .wb-preview-frame{min-height:560px;border-radius:14px}
 .wb-preview[data-device="desktop"] .wb-site-hero{grid-template-columns:1fr}
 .wb-preview[data-device="desktop"] .wb-site-visual{min-height:175px}
 .wb-preview[data-device="desktop"] .wb-service-grid{grid-template-columns:1fr}
 .wb-preview[data-device="desktop"] .wb-site-about{grid-template-columns:1fr}
}

/* Landing Page Builder: stable live preview + safe wrapping */
.wb-service-grid article,
.wb-service-grid strong,
.wb-about-copy,
.wb-about-copy p,
.wb-contact-card,
.wb-contact-card>span{
 min-width:0;
 overflow-wrap:anywhere;
 word-break:break-word;
}
.wb-site-nav nav span{
 font-size:10.5px;
 font-weight:500;
}
.wb-action-row{
 display:grid;
 grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
 gap:9px;
 align-items:center;
}
.wb-action-row .wb-ai-status{
 grid-column:1/-1;
 margin:0;
}
.wb-secondary-button,
.wb-export-button{
 min-height:46px;
 border-radius:12px;
 padding:0 14px;
 font:800 12px 'DM Sans',system-ui,sans-serif;
 cursor:pointer;
}
.wb-secondary-button{
 border:1px solid #cfd8eb;
 background:#fff;
 color:#344664;
}
.wb-secondary-button:hover{border-color:#9eacd0;background:#f8faff}
.wb-export-button{
 border:1px solid #1f335d;
 background:#172852;
 color:#fff;
}
.wb-export-button:hover{background:#0f1d3a}
.wb-hero-cta{
 display:inline-flex;
 align-items:center;
 gap:6px;
 border:0;
 border-radius:11px;
 background:var(--wb-accent);
 color:#fff;
 padding:13px 17px;
 font-weight:850;
 text-decoration:none;
}
.wb-preview[data-style="minimal"] .wb-hero-cta{border-radius:0;background:#111}
.wb-preview[data-style="bold"] .wb-hero-cta{color:#2b173d}
.wb-preview[data-style="elegant"] .wb-hero-cta{
 border:1px solid #966936;
 border-radius:999px;
 background:transparent;
 color:#6d4c28;
}
.wb-site-nav a{
 color:inherit;
 text-decoration:none;
}
.wb-site-nav a:hover{text-decoration:underline}
@media(max-width:760px){
 .wb-action-row{grid-template-columns:1fr}
 .wb-action-row .wb-ai-status{grid-column:auto}
}