/* WEBSAN 2.0 — finished conversion-focused home design */
.desktop-nav{gap:22px}.desktop-nav a{font-size:12px}.head-contact{padding:10px 12px;border:0;font-size:11px}.header-cta{background:var(--blue);color:#fff;border-radius:10px;padding:14px 17px;white-space:nowrap;font-size:12px;font-weight:800;transition:transform .2s,box-shadow .2s}.header-cta:hover{transform:translateY(-2px);box-shadow:0 9px 19px #2667e944}
.hero{background:radial-gradient(circle at 84% 14%,#ddebff 0,transparent 42%),linear-gradient(115deg,#f6faff,#eef5ff)}.hero-layout{grid-template-columns:.98fr 1.02fr;min-height:624px}.hero h1{font-size:clamp(39px,4.4vw,61px);line-height:1.17}.lead{font-size:14px;max-width:480px}.hero-benefits{display:flex;flex-wrap:wrap;align-items:center;gap:13px 20px;margin-top:36px;color:#586d8e;font-size:11px;font-weight:800}.hero-benefits span{white-space:nowrap}.hero-benefits span::first-letter{color:var(--blue)}.hero-example .example-picture{background-repeat:no-repeat;background-size:cover;background-position:center}.hero-clinic .smile-visual{background-image:linear-gradient(90deg,#d1effb55,#d1effb00 30%),url('demo/clinic/hero.jpg');border-radius:38% 0 0 0;background-position:center 23%}.hero-build .building-visual{background-image:url('demo/construction/hero.jpg');background-size:cover}.hero-beauty .beauty-visual{background-image:url('demo/beauty/hero.jpg');background-position:center 24%}.hero-clinic .smile-circle,.hero-clinic .smile-smile,.hero-clinic .smile-star,.hero-build .building-one,.hero-build .building-two,.hero-build .building-three,.hero-beauty .beauty-petal,.hero-beauty .beauty-orbit{display:none}.hero-visual .mockup-stage{aspect-ratio:1.33}.hero-float{bottom:74px;left:-15px}.hero-switcher{flex-wrap:wrap}.hero .example-content-text{background:linear-gradient(90deg,#f0f9fd 10%,#f0f9fd00 100%)}.hero-build .example-content-text{background:linear-gradient(90deg,#f1eee7 10%,#f1eee700 100%)}.hero-beauty .example-content-text{background:linear-gradient(90deg,#f7eae9 10%,#f7eae900 100%)}
.style-select{width:auto;min-width:90px;height:37px;border-radius:9px;padding:9px 12px;font-size:10px;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;background:#ecf3ff;color:#245bdb}.style-select:hover{background:var(--blue);color:white}.style-card-copy{align-items:center}.style-card-copy>div{min-width:0}.style-card h3{font-size:21px}
.industry-image{isolation:isolate}.industry-image::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.86;background-position:center;background-size:cover}.industry-med::before{background-image:linear-gradient(90deg,#d4f5f8 0%,#d4f5f8f0 35%,#d4f5f801 95%),url('demo/clinic/hero.jpg');background-position:center 25%}.industry-build::before{background-image:linear-gradient(90deg,#263e55d9 0%,#263e5510 90%),url('demo/construction/hero.jpg')}.industry-beauty::before{background-image:linear-gradient(90deg,#f9e7e7 0%,#f9e7e7d6 40%,#f9e7e709 90%),url('demo/beauty/hero.jpg');background-position:center 20%}.industry-auto::before{background-image:linear-gradient(90deg,#182439d9 0%,#18243921 90%),url('demo/auto/hero.jpg')}.industry-med-icon,.industry-high-rise,.industry-flower,.auto-silhouette{display:none}
.why-section{padding-top:88px;padding-bottom:85px}.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.why-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:25px 23px;min-height:214px;transition:transform .22s,box-shadow .22s}.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.why-icon{display:grid;place-items:center;width:51px;height:51px;background:#eaf2ff;border-radius:15px;color:var(--blue);font-size:25px;margin-bottom:22px}.why-card h3{font-size:16px;letter-spacing:-.04em}.why-card p{font-size:11px;color:var(--muted);line-height:1.8;margin-top:8px}
.price-card{min-height:418px}.price-features{list-style:none;margin:15px 0 24px;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.price-features li{font-size:11px;color:#586d87;padding-left:20px;position:relative}.price-features li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue);font-weight:800}.price-card .price-button{margin-top:auto}.price-highlight .price-badge{color:var(--blue)}
.process-section{background:#f7faff}.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.process-item{border-radius:16px;background:white;border:1px solid #e2eaf7;padding:26px;position:relative;min-height:220px}.process-item:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:48%;color:var(--blue);z-index:1;background:#f7faff;border-radius:50%;width:26px;height:26px;text-align:center;line-height:24px;font-size:15px}.process-item>span{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#e6efff;color:var(--blue);font-size:16px;font-weight:800;margin-bottom:24px}.process-item h3{font-size:18px}.process-item p{margin-top:10px;font-size:12px;line-height:1.75;color:var(--muted)}
.faq-section{background:white}.faq-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:65px;align-items:start}.faq-grid>div>p:not(.section-kicker){margin-top:20px;max-width:310px;font-size:13px;color:var(--muted)}.faq-contact-link{display:inline-block;font-size:12px;color:var(--blue);font-weight:800;margin-top:24px}.faq-answers{border-top:1px solid var(--line)}.faq-answers details{border-bottom:1px solid var(--line)}.faq-answers summary{font-size:14px;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:15px;list-style:none;padding:22px 6px}.faq-answers summary::-webkit-details-marker{display:none}.faq-answers summary span{font-size:24px;color:var(--blue)}.faq-answers details[open] summary span{transform:rotate(45deg)}.faq-answers details p{font-size:12px;color:var(--muted);padding:0 22px 20px 6px;line-height:1.9}
.closing{background:linear-gradient(110deg,#eaf3ff 0%,#f2f7ff 70%,#e7f4fc);color:var(--ink);padding:76px 0}.closing .section-kicker{color:var(--blue)}.closing h2{font-size:clamp(34px,4.5vw,54px)}.closing h2 span{color:var(--blue)}.closing p:not(.section-kicker){color:#687d98;font-size:13px}.closing-inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}.contact-panel{background:white;border:1px solid #dfe8f4;border-radius:20px;padding:28px;box-shadow:0 13px 38px #254e8514;min-width:0}.contact-panel form{display:flex;flex-direction:column;gap:15px}.contact-panel h3{display:flex;justify-content:space-between;align-items:center;font-size:22px;letter-spacing:-.045em;margin:0 0 3px}.contact-panel h3 span{color:var(--blue);font-size:26px}.contact-panel label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;color:#375070}.contact-panel input:not([type=checkbox]),.contact-panel select,.contact-panel textarea{display:block;width:100%;min-width:0;max-width:100%;border:1px solid #dbe5f0;background:#f9fbff;border-radius:10px;color:var(--ink);font-size:13px;padding:11px 13px;outline-offset:2px}.contact-panel input,.contact-panel select{min-height:48px}.contact-panel textarea{min-height:78px;resize:vertical}.contact-panel input:focus,.contact-panel select:focus,.contact-panel textarea:focus{border-color:var(--blue)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.contact-panel .consent{display:flex;flex-direction:row;gap:10px;align-items:flex-start;font-weight:500;font-size:10px;color:#73849b;line-height:1.7}.contact-panel .consent input{flex:none;accent-color:#2563eb;width:17px;height:17px;margin:2px 0 0}.consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}.contact-submit{border:0;background:var(--blue);color:#fff;width:100%;justify-content:center;box-shadow:0 8px 22px #2663ee23}.form-message{font-size:11px!important;color:#1b6a88!important;margin:0!important}.contact-panel small{font-size:10px;color:#7c8ca3;line-height:1.75}.lead-fallback{display:block;color:var(--blue);font-size:12px;font-weight:800;text-decoration:underline}.lead-fallback[hidden]{display:none}.contact-simple{display:flex;gap:13px;flex-wrap:wrap;margin-top:24px}.contact-simple a{border:1px solid #d6e4f5;border-radius:10px;background:white;padding:11px 13px;font-size:11px;font-weight:800;color:#2858a8}.contact-simple a:hover{border-color:var(--blue)}.choice-display{background:#fff;border-color:#d4e5f5;color:#6b7f99;max-width:100%;line-height:1.8}.choice-display strong{color:#1c3d69}.choice-display button{color:#1c3d69}.choice-display .choice-preview{color:#2265dc}
.footer-links{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:23px 0;border-bottom:1px solid var(--line)}.footer-links nav{display:flex;align-items:center;gap:19px;flex-wrap:wrap}.footer-links a{font-size:11px;font-weight:800;color:#667c9a}.footer-links>a{white-space:nowrap;color:var(--blue)}.footer-links a:hover{color:var(--blue)}.footer-bottom{gap:16px}
@media(max-width:1200px){.desktop-nav{gap:15px}.header-cta{font-size:11px;padding:12px}.head-contact{font-size:10px}.container{width:calc(100% - 48px)}}
@media(max-width:1320px){.desktop-nav,.head-contact,.header-cta{display:none}.nav-toggle{display:flex;width:43px;height:43px;flex-direction:column;gap:5px;justify-content:center;align-items:center;background:#eef5ff;border:0;border-radius:12px}.nav-toggle span{width:19px;height:2px;background:#24416a;border-radius:3px}.mobile-nav{display:flex;position:absolute;top:100%;left:0;right:0;background:white;padding:12px 24px 22px;box-shadow:0 20px 30px #122d5330;flex-direction:column;gap:3px;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s}.mobile-nav.is-open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}.mobile-nav a{padding:11px 7px;font-weight:800;font-size:13px}.hero-layout{grid-template-columns:1fr 1fr;gap:24px}.hero h1{font-size:clamp(38px,4.2vw,52px)}.why-grid{grid-template-columns:repeat(2,1fr)}.closing-inner{gap:33px}.faq-grid{gap:35px}}
@media(max-width:800px){.hero-layout{grid-template-columns:1fr}.hero h1{font-size:clamp(42px,6vw,60px);max-width:780px}.hero-benefits{margin-top:23px}.hero .mockup-stage{aspect-ratio:1.5}.why-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.process-item:nth-child(even)::after{display:none}.faq-grid,.closing-inner{grid-template-columns:1fr}.contact-intro{max-width:660px}.contact-panel{max-width:650px;width:100%}.footer-links{align-items:start;flex-direction:column;gap:12px}}
@media(max-width:540px){.container{width:calc(100% - 36px)}.hero h1{font-size:clamp(38px,10vw,49px)}.hero-benefits{gap:8px 13px;font-size:10px}.hero .mockup-stage{aspect-ratio:1.15}.why-grid,.process-grid{grid-template-columns:1fr}.why-card{min-height:0}.process-item{min-height:0}.process-item::after{display:none!important}.price-card{min-height:0}.style-card-copy{padding:17px}.style-card h3{font-size:20px}.style-select{font-size:10px;padding:9px 10px}.contact-panel{padding:19px}.field-row{grid-template-columns:1fr}.closing{padding:63px 0}.footer-links nav{gap:11px 17px}.footer-bottom{align-items:start}.hero-float{display:none}.hero-switcher{gap:7px;flex-wrap:wrap}.hero .example-content-text h3{font-size:clamp(17px,5.3vw,26px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Form usability fixes verified during mobile visual QA */
.contact-panel .consent{align-items:flex-start;overflow-wrap:anywhere;font-size:11px}
.contact-panel .consent span{flex:1;min-width:0}
.contact-panel input[type="checkbox"]{display:block;min-width:18px;width:18px;min-height:18px;height:18px;flex:0 0 18px;margin:3px 0 0}
@media(max-width:540px){.contact-panel .consent{font-size:11px;line-height:1.55}.contact-panel small{line-height:1.6}}
/* Toast must never widen a 320–390 px viewport */
.selection-toast{max-width:calc(100vw - 24px);width:max-content;white-space:normal;overflow-wrap:anywhere;line-height:1.5;padding:12px 15px}
@media(max-width:660px){
.selection-toast{left:12px;right:12px;width:auto;max-width:none;transform:translateY(40px)}
.selection-toast.is-visible{transform:translateY(0)}
}
/* Long selected style names cannot expand the mobile grid's min-content width */
.contact-intro,.contact-panel{min-width:0}
.choice-display{white-space:normal;overflow-wrap:anywhere;min-width:0}
.choice-display strong{overflow-wrap:anywhere}
@media(max-width:800px){
.closing-inner{grid-template-columns:minmax(0,1fr)}
.contact-intro{min-width:0;max-width:100%}
.choice-display{width:100%;max-width:100%;overflow-wrap:anywhere}
}

/* Hero price offer: keep the minimum price together on mobile */
.hero h1 em{white-space:nowrap}

/* WEBSAN header readability improvement, 13 Oct 2026 */
@media(min-width:1321px) {
  .desktop-nav{gap:17px}
  .desktop-nav a{font-size:16px;line-height:1.45;font-weight:800;letter-spacing:-.015em}
  .head-contact{font-size:14px;font-weight:800;white-space:nowrap;padding:11px 8px}
  .header-cta{font-size:14px;font-weight:800;padding:15px 17px;white-space:nowrap}
}
@media(max-width:1320px){
  .mobile-nav a{font-size:17px;line-height:1.5;padding:11px 9px}
  .mobile-nav{max-height:calc(100vh - 74px);overflow-y:auto}
}
@media(max-width:540px){
  .mobile-nav a{font-size:17px;line-height:1.5;padding:12px 7px}
}

.contact-simple a[href^="mailto:"]{overflow-wrap:anywhere}
.footer-links>a[href^="mailto:"]{overflow-wrap:anywhere}