/* Responsive layout: reserve account controls before the desktop menu. */
.header .nav{position:relative}.header .brand,.header .navright{flex-shrink:0}.header .navright{margin-left:auto}.header .login-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px}.header .lang,.header .mobile-toggle{min-height:44px}.hero>*,.section-head>*,.preview-grid>*,.automation-home-inner>*,.automation-product-hero>*,.form-grid>*,.contact-grid>*{min-width:0}img{max-width:100%}input,select,textarea{max-width:100%;min-width:0}h1,h2,h3,p,.button{overflow-wrap:break-word}.button{white-space:normal;text-align:center}.hero-actions,.service-actions{row-gap:18px}
@media(max-width:1250px){
.header .nav{height:auto;min-height:88px;gap:16px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap}.header .navlinks{display:none;position:static;order:3;flex-basis:100%;width:100%;margin:6px 0 0;padding:18px 0 6px;border:0;border-top:1px solid var(--line);background:var(--paper);grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-height:60vh;overflow-y:auto}.header .navlinks.open{display:grid}.header .navlinks a{white-space:normal;text-align:center;display:flex;align-items:center;justify-content:center;min-height:48px}.header .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:8px;background:var(--peach);box-shadow:0 3px 0 var(--ink);padding:8px 12px;font-size:20px}.header .navright{gap:12px}.header .login-link{padding:10px 14px;font-size:12px}.header .brand img{width:170px}.hero{gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:900px){.hero{display:flex;flex-direction:column;align-items:stretch;gap:32px}.hero-visual{max-width:650px;width:100%!important;align-self:center}.hero h1,.public-page .hero h1{font-size:clamp(40px,7vw,64px)}.preview-grid,.faq-grid,.contact-grid,.automation-service-grid{grid-template-columns:minmax(0,1fr)}.section-head{flex-direction:column;align-items:start}.section-head .lead{max-width:100%}.automation-home-inner,.automation-product-hero{grid-template-columns:minmax(0,1fr)}.footer-links{flex-wrap:wrap}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.header .nav{padding-top:14px;padding-bottom:14px;gap:12px}.header .brand img{width:140px}.header .navright{gap:8px}.header .navlinks{grid-template-columns:repeat(2,minmax(0,1fr))}.header .login-link{display:inline-flex!important;padding:9px 10px;font-size:10px;white-space:normal;max-width:100px}.header .lang{padding:9px 10px}.header .mobile-toggle{padding:7px 10px}.shell{padding-left:20px;padding-right:20px}.cards,.promise,.steps,.automation-grid,.automation-flow,.automation-price{grid-template-columns:minmax(0,1fr)}.hero h1,.public-page .hero h1{font-size:clamp(38px,10vw,56px)}.automation-dashboard{padding:22px;box-shadow:5px 6px 0 var(--peach)}.automation-dash-row{gap:12px;padding:16px}.automation-dash-row>*{min-width:0}.automation-dash-row strong{font-size:16px}.automation-dash-row p{font-size:13px}.automation-dash-head{gap:12px}.automation-dash-head strong{font-size:20px}.service-actions{align-items:stretch;flex-direction:column;gap:22px}.service-actions .seo-link{align-self:start}.footer-top{gap:24px}.footer-links{gap:18px}.report{flex-wrap:wrap}.report a{white-space:normal}.cta-band{max-width:100%}.form-card,.login-card{min-width:0}.picker-price{flex-wrap:wrap}.quick-plans button{flex-wrap:wrap}.account-popover{max-width:calc(100vw - 32px)}}
@media(max-width:420px){.preview-art{height:310px;overflow:hidden}.preview-sticky.one{left:16px;max-width:70%}.preview-sticky.two{left:auto;right:16px;max-width:70%}.header .nav{padding-left:14px;padding-right:14px;gap:8px}.header .brand img{width:108px}.header .navright{gap:6px}.header .login-link{max-width:78px;padding:8px;font-size:10px}.header .lang{padding:8px}.header .mobile-toggle{padding:6px 8px}.header .navlinks{grid-template-columns:1fr}.automation-dashboard{padding:18px}.automation-dash-row{padding:14px;gap:9px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .button{width:100%}}


.header .navright{margin-left:auto}
/* Keep container gutters independent of section rhythm at every breakpoint. */
.shell.section{padding-block:70px}.shell.subhero{padding-block:48px 42px}.section-head{margin-bottom:32px}.section-head .lead{min-width:0}.promise,.steps,.cards,.seo-grid{gap:24px}.promise>*,.steps>*,.cards>*,.seo-grid>*{min-width:0}.studio-scene{margin-bottom:0}.studio-scene+section{position:relative}
@media(max-width:1100px){
 .shell.section{padding-block:60px}.shell.subhero{padding-block:42px 36px}.section-head{flex-direction:column;align-items:stretch;gap:24px}.section-head p.lead{flex:none;width:100%;max-width:62ch;margin:0;padding-inline-start:18px}.promise{grid-template-columns:repeat(2,minmax(0,1fr))}.promise-card:last-child{grid-column:1/-1}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head h2{max-width:24ch}.lead{font-size:17px;line-height:1.7}
}
@media(max-width:900px){
 .shell.section{padding-block:56px}.promise,.cards,.steps,.seo-grid,.journey-steps{grid-template-columns:minmax(0,1fr)}.promise-card:last-child{grid-column:auto}.section-head{display:flex;gap:24px;margin-bottom:28px}.section-head p.lead{flex:none;max-width:100%}.promise-card,.price-card,.seo-card{padding:26px}.section h2,.subhero h2{font-size:clamp(30px,4.8vw,44px);line-height:1.12}.section .eyebrow{line-height:1.6;margin-bottom:16px}.section .eyebrow:before{flex-shrink:0}.evidence-grid{grid-template-columns:minmax(0,1fr);gap:24px}.evidence-tall{grid-row:auto}.preview-grid{gap:32px}.footer-top{gap:28px}.service-choice h2{font-size:28px;line-height:1.15}.service-choices{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:650px){
 .shell.section{padding-block:44px}.shell.subhero{padding-block:36px 32px}.section-head{gap:22px;margin-bottom:26px}.section-head .lead{font-size:16px;line-height:1.75;padding-inline-start:16px;margin-top:0}.section h2,.subhero h2{font-size:clamp(28px,7.5vw,38px);line-height:1.15}.section h3{font-size:24px;line-height:1.2}.promise-card,.price-card,.seo-card{padding:24px}.promise-card p,.step p{font-size:15px;line-height:1.7}.promise,.cards,.steps,.seo-grid{gap:22px}.studio-scene{width:100%;margin:12px 0 0}.studio-scene svg{display:block;width:100%;height:auto;min-height:0}.service-journey>.shell.section{padding-block:44px}.lead{font-size:16px;line-height:1.75}.copy-opening{line-height:inherit}.cta-band{margin-block:36px}.automation-content,.automation-services{padding-block:44px}.footer{padding-top:40px}.journey-steps{padding-left:24px;gap:18px}.journey-steps li{padding:12px 0 12px 8px}
}
/* Faithful sample workspace screenshots, with readable detail crops. */
.demo-hero{margin:0;min-width:0;align-self:center}.demo-image{display:block;position:relative;border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:#f5f7f4;box-shadow:4px 5px 0 var(--ink)}.demo-image img{display:block;width:100%;height:auto}.demo-expand{display:block;padding:12px 16px;font-size:12px;font-weight:700;color:var(--plum);background:#fff;border-top:1px solid var(--line)}.demo-image:focus-visible{outline:3px solid var(--plum);outline-offset:6px}.demo-hero>figcaption{font-size:12px;line-height:1.6;margin-top:16px;color:var(--muted)}.demo-section{border-top:1px solid var(--line)}.demo-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px 28px;margin-top:32px;align-items:start}.demo-detail{margin:0;min-width:0}.demo-detail figcaption{padding:22px 0 0}.demo-detail h3{font-size:25px;line-height:1.2}.demo-detail figcaption p{font-size:16px;line-height:1.7;color:#465046;margin:12px 0 0;max-width:58ch}.demo-activity{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:center}.demo-activity figcaption{padding:0}.demo-section>.lead{max-width:70ch}
@media(max-width:900px){.demo-grid,.demo-activity{grid-template-columns:minmax(0,1fr)}.demo-activity{gap:0}.demo-activity figcaption{padding-top:22px}.demo-hero{max-width:720px}.demo-grid{gap:32px}.demo-detail h3{font-size:24px}}

/* Phone header: separate brand from actions so all controls remain reachable. */
@media(max-width:650px){
 .header .nav{display:flex;flex-wrap:wrap;gap:12px!important;padding-block:12px}
 .header .brand{flex-basis:100%;justify-content:center}
 .header .brand img{width:140px}
 .header .navright{flex:1 1 100%;width:100%;min-width:0;margin:0;justify-content:center;gap:10px!important}
 .header .navright>.button{display:none}
 .header .currency-control select{min-height:44px;max-width:78px;padding:9px 6px;font-size:14px}
 .header .lang,.header .mobile-toggle,.header .login-link{min-width:44px;min-height:44px}
 .header .login-link{font-size:12px;max-width:120px;padding:10px 12px}
 .header .navlinks{order:3;margin-top:0;max-height:50vh}
 .price,.picker-price,.automation-price strong{overflow-wrap:anywhere;max-width:100%;line-height:1.25}
 .price{font-size:clamp(28px,8vw,42px)}
 .form-card,.login-card{padding:24px 20px}
 .field input,.field select,.field textarea{font-size:16px}
 .order-summary{overflow-wrap:anywhere}
 .order-summary>div{flex-wrap:wrap;gap:8px}
 .billing{flex-wrap:wrap;row-gap:12px}
 .footer-top>*{min-width:0}.footer-links a{padding-block:8px}
 .onboarding-mode .header .brand{flex-basis:auto}.onboarding-mode .header .navright{flex:1;justify-content:flex-end;width:auto}
}
@media(max-width:360px){.header .navright{gap:7px!important}.header .login-link{font-size:11px;padding-inline:8px}.header .currency-control select{max-width:72px}}

/* Shared bilingual merchant content: show only the document language. */
html[lang="en"] .merchant-id,html[lang="id"] .merchant-en{display:none!important}
html[lang="en"] .merchant-en,html[lang="id"] .merchant-id{display:revert}