.marketing-shell [hidden] { display: none !important; }
.marketing-shell { --fresh-ink: #17312d; }
.marketing-shell h1,.marketing-shell h2,.marketing-shell h3 { overflow-wrap: anywhere; }
.marketing-header { min-height: 84px; gap: 28px; position: relative; z-index: 5; }
.marketing-nav { font-size: 14px; gap: 26px; }
.marketing-nav a { padding: 12px 0; }
.marketing-nav a:hover { color: #087d65; }
.marketing-account { font-size: 13px; }
.marketing-shell .button { min-height: 46px; font-size: 14px; font-weight: 750; }
.marketing-menu-toggle,.mobile-login { display: none; }
.witrin-hero { position: relative; isolation: isolate; overflow: hidden; background: #e3f4eb; color: var(--fresh-ink); }
.witrin-scene { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .08; }
.witrin-hero-inner { max-width: 1184px; margin: auto; min-height: 590px; position: relative; padding: 44px 28px; }
.witrin-hero-copy { width: 52%; position: relative; z-index: 2; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; margin-bottom: 18px; }
.hero-tag .icon { color: #087d65; }
.witrin-hero h1 { font-size: 60px; line-height: 1; color: #087d65; margin-bottom: 22px; }
.hero-slide { min-height: 163px; }
.hero-slide h2 { font-size: 42px; line-height: 1.12; margin-bottom: 16px; }
.hero-slide p { font-size: 16px; line-height: 1.6; max-width: 355px; }
.hero-start { margin-top: 12px; background: #087d65; }
.hero-footnote { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 12px 0 24px; }
.hero-footnote .icon { width: 14px; height: 14px; }
.hero-switch { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; background: #ffffffb8; border: 1px solid #c7ded4; border-radius: 8px; }
.hero-switch button { border: 0; background: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 5px; font: inherit; font-size: 13px; font-weight: 700; color: #34534b; cursor: pointer; }
.hero-switch button[aria-selected=true] { background: #17312d; color: white; }
.hero-mobile-stage { position: absolute; right: 50px; top: 40px; width: 385px; height: 520px; }
.phone-frame { width: 260px; height: 495px; overflow: hidden; background: white; border: 7px solid #17312d; border-radius: 30px; margin: 0 auto; box-shadow: 14px 18px 0 #a5d6c2; transform: rotate(3deg); }
.phone-address { height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; color: #58746a; border-bottom: 1px solid #e9eeeb; background: #fff; }
.phone-address .icon { width: 12px; height: 12px; }
.phone-frame > img { display: block; width: 100%; height: auto; }
.hero-sticker { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 13px 16px; font-size: 13px; font-weight: 750; border-radius: 6px; box-shadow: 0 6px 14px #17312d14; }
.sticker-message { bottom: 80px; left: -38px; background: #fff08c; transform: rotate(-6deg); }
.sticker-link { top: 65px; right: -32px; background: #ffd9cf; transform: rotate(5deg); }
.demo-calendar { padding: 20px 15px; }
.demo-brand { color: #a24052; font-size: 12px; font-weight: 800; }
.demo-calendar h3 { font-size: 25px; margin: 13px 0 8px; line-height: 1.12; }
.demo-calendar p { color: #6f6b6a; font-size: 11px; }
.demo-days { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 22px 0; }
.demo-days span { text-align: center; font-size: 10px; padding: 10px 3px; background: #f5f5f5; border-radius: 6px; }
.demo-days b { display: block; margin-top: 5px; font-size: 16px; }
.demo-days .selected { background: #a24052; color: white; }
.demo-calendar h4 { font-size: 12px; }
.demo-slots { display: grid; gap: 8px; }
.demo-slots span { display:flex; justify-content:space-between; padding: 10px; font-size: 11px; background: #f3f3f3; color: #7d8581; border-radius: 5px; }
.demo-slots .available { background: #e2f4eb; color: #087d65; }
.demo-slots b { font-size: 10px; }
.demo-whatsapp { display: flex; align-items: center; justify-content: center; gap: 6px; background: #087d65; color: white; padding: 12px 4px; margin-top: 16px; border-radius: 5px; font-size: 10px; }
.witrin-benefits { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; padding: 26px max(28px,calc((100% - 1128px)/2)); border-bottom: 1px solid #e2e9e5; background: white; }
.witrin-benefits span { display:flex; align-items:center; gap: 10px; font-size: 12px; }
.witrin-benefits .icon { color: #087d65; flex-shrink: 0; }
.fresh-features .marketing-features { gap: 32px; }
.fresh-features .marketing-features article { border: 0; padding-bottom: 0; }
.fresh-features .marketing-feature-icon { width: 48px; height: 48px; margin-bottom: 14px; }
.fresh-features h3 { font-size: 20px; }
.fresh-features p { font-size: 14px; }
.fresh-how { background: #fff0ed; padding: 56px max(28px,calc((100% - 1128px)/2)); display:grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: start; }
.fresh-how h2 { font-size: 36px; margin: 0; }
.fresh-how ol { list-style: none; padding:0; margin:0; display:grid; gap: 24px; }
.fresh-how li { display:flex; gap: 20px; align-items: start; }
.fresh-how li > b { color: #b74640; font-size: 28px; }
.fresh-how li span { font-size: 20px; font-weight: 750; }
.fresh-how small { display:block; font-size:13px; font-weight:400; margin-top:8px; color:#745954; }
.fresh-how > .button { justify-self: start; }
.marketing-plans-section { background: #f6f8fa; }
.marketing-plans { max-width: none; }
.marketing-plan.pro-plan { background: #e6f4ef; border-color: #b4daca; border-top: 3px solid #087d65; }
.marketing-price small { font-size: 14px; font-weight: 500; }
.marketing-final { background: #fff08c; }
.blog-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.blog-section-heading h2 { font-size: 32px; margin-bottom:0; }
.blog-section-heading .back-link { flex-shrink:0; font-size:13px; min-height:44px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.blog-card { overflow:hidden; border:1px solid #e2e9e5; border-radius:8px; background:white; min-width:0; }
.blog-card > a { display:flex; flex-direction:column; height:100%; color:inherit; }
.blog-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.blog-card-copy { padding:22px; display:flex; flex-direction:column; flex:1; }
.blog-card h3 { font-size:20px; line-height:1.35; margin:10px 0; }
.blog-card p { font-size:13px; line-height:1.7; color:#63726d; }
.blog-read { display:flex; align-items:center; gap:6px; color:#087d65; font-weight:750; font-size:13px; margin-top:auto; padding-top:12px; }
.blog-card:hover { border-color:#087d65; }
.blog-index h1 { font-size:44px; margin-bottom:14px; }
.blog-intro { color:#63726d; margin-bottom:32px; }
.blog-article { max-width:820px; margin:auto; padding:40px 28px 64px; }
.blog-article > .back-link { min-height:44px; font-size:13px; margin-bottom:20px; }
.blog-article header h1 { font-size:40px; line-height:1.2; }
.blog-article header > p:last-child { color:#63726d; line-height:1.7; }
.blog-cover { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; margin:16px 0 24px; }
.blog-body { line-height:1.85; font-size:16px; overflow-wrap:anywhere; }
.blog-body p { margin-bottom:26px; }
.blog-body h2 { font-size:22px; margin:30px 0 12px; line-height:1.35; }
.blog-cta { margin-top:40px; border-top:1px solid #e2e9e5; padding-top:28px; }
.blog-cta h2 { font-size:24px; }
@media(max-width:1000px) {
    .marketing-header { gap:16px; padding-inline:20px; }
    .marketing-nav { gap:16px; }
    .hero-mobile-stage { right:25px; width:320px; }
    .sticker-link { right:0; }
    .sticker-message { left:-10px; }
    .witrin-hero h1 { font-size:52px; }
    .hero-slide h2 { font-size:36px; }
}
@media(max-width:800px) {
    .marketing-header { min-height:72px; flex-wrap:nowrap; padding:12px 16px; gap:10px; }
    .marketing-header .brand { font-size:20px; gap:7px; flex-shrink:0; }
    .marketing-account { gap:8px; }
    .marketing-account .button { font-size:12px; padding:8px 10px; min-height:44px; }
    .marketing-account .button .icon { display:none; }
    .marketing-login { display:none; }
    .marketing-menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; flex:0 0 44px; padding:0; border:0; border-radius:6px; background:transparent; color:#17312d; }
    .marketing-menu-toggle .icon { width:24px; height:24px; flex-shrink:0; }
    .marketing-menu-toggle:hover,.marketing-menu-toggle[aria-expanded=true] { background:#e3f4eb; color:#087d65; }
    .marketing-menu-toggle:focus-visible { outline:2px solid #087d65; outline-offset:2px; }
    .marketing-nav { display:none; position:absolute; top:100%; left:0; right:0; background:white; padding:12px 20px 20px; border-bottom:1px solid #d7e2dd; box-shadow:0 10px 18px #17312d12; }
    .marketing-nav.is-open { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
    .marketing-nav a { min-height:44px; display:flex; align-items:center; font-size:14px; border-bottom:1px solid #eef2ef; }
    .marketing-nav .mobile-login { display:flex; }
    .witrin-hero-inner { min-height:0; padding:20px 20px 24px; display:grid; justify-items:center; }
    .witrin-hero-copy { width:100%; text-align:center; }
    .hero-tag { font-size:11px; margin-bottom:8px; }
    .witrin-hero h1 { font-size:46px; margin-bottom:8px; }
    .hero-slide { min-height:119px; }
    .hero-slide h2 { font-size:28px; line-height:1.15; margin-bottom:10px; }
    .hero-slide h2 br { display:none; }
    .hero-slide p { max-width:320px; margin:0 auto; font-size:13px; line-height:1.6; }
    .hero-start { margin-top:8px; width:100%; max-width:350px; }
    .hero-footnote { justify-content:center; font-size:10px; margin:8px 0 10px; }
    .hero-switch { width:100%; max-width:320px; }
    .hero-switch button { font-size:12px; padding:8px; }
    .hero-mobile-stage { position:relative; top:auto; right:auto; width:100%; max-width:340px; height:270px; margin-top:18px; overflow:hidden; }
    .phone-frame { width:190px; height:365px; border-width:5px; border-radius:22px; box-shadow:10px 12px 0 #a5d6c2; }
    .phone-address { height:26px; font-size:8px; }
    .hero-sticker { font-size:10px; padding:9px 10px; gap:5px; }
    .hero-sticker .icon { width:15px; height:15px; }
    .sticker-message { bottom:35px; left:0; }
    .sticker-link { top:45px; right:0; }
    .demo-calendar { padding:12px; }
    .demo-calendar h3 { font-size:20px; }
    .demo-days { margin:14px 0; }
    .demo-days span { padding:7px 2px; }
    .demo-slots span { padding:8px; }
    .witrin-benefits { grid-template-columns:1fr 1fr; padding:20px; gap:18px 12px; }
    .witrin-benefits span { font-size:10px; gap:7px; }
    .witrin-benefits .icon { width:18px; height:18px; }
    .marketing-section,.marketing-plans-section { padding:44px 20px; }
    .marketing-section-head { margin-bottom:28px; }
    .marketing-section-head h2 { font-size:28px; }
    .fresh-features .marketing-features { grid-template-columns:1fr 1fr; gap:26px 18px; }
    .fresh-features h3 { font-size:17px; }
    .fresh-features p { font-size:12px; line-height:1.6; }
    .fresh-how { grid-template-columns:1fr; padding:36px 20px; }
    .fresh-how h2 { font-size:28px; }
    .fresh-how li span { font-size:17px; }
    .fresh-how small { line-height:1.6; }
    .blog-grid { grid-template-columns:1fr; gap:20px; }
    .blog-section-heading { align-items:start; flex-direction:column; gap:8px; }
    .blog-section-heading h2 { font-size:28px; }
    .blog-card-copy { padding:20px; }
    .blog-index h1 { font-size:32px; }
    .blog-article { padding:24px 20px 48px; }
    .blog-article header h1 { font-size:28px; }
    .blog-body { font-size:15px; }
    .marketing-footer { padding:24px 20px; gap:18px; flex-wrap:wrap; }
    .marketing-footer nav { gap:18px; flex-wrap:wrap; }
    .marketing-final h2 { font-size:28px; }
}
@media(max-width:360px) {
    .marketing-header { padding-inline:12px; gap:6px; }
    .marketing-header .brand { font-size:18px; }
    .marketing-account { gap:4px; }
    .marketing-account .button { font-size:11px; padding-inline:8px; }
    .witrin-hero-inner { padding-inline:16px; }
    .hero-slide h2 { font-size:25px; }
    .witrin-hero h1 { font-size:42px; }
    .hero-mobile-stage { height:245px; }
    .hero-sticker { font-size:9px; padding:8px; }
}
@media(prefers-reduced-motion:no-preference) {
    .hero-slide:not([hidden]) { animation: hero-reveal .3s ease-out; }
    @keyframes hero-reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
}
.marketing-logout { display: flex; justify-content: flex-end; padding: 8px 16px; margin: 0 auto; max-width: 1200px; }